当前位置: 首页 > 面试题库 >

Bootstrap 4导航栏和内容填充高度flexbox

濮阳振海
2023-03-14
问题内容

我必须创建一个布局,其中内容网格必须位于剩余的整个页面上,但是该布局还具有导航栏。

为此,我决定将导航栏放置在flex容器中,并将内容放置在高度为100%的行中。我需要内容来填充剩余的剩余空间。菜单是动态的,所以我不知道导航栏的高度。

但是,在较小的屏幕上,导航栏无法正确调整大小。如果展开菜单,则菜单将覆盖内容。

<div class="container-fluid h-100 d-flex flex-column">

  <nav class="navbar navbar-expand-sm s-navbar">
     ...
  </nav>
  <div class="row h-100">
     ...// content presented here
  </div>
</div>

最后一个菜单项被剪切了。我的要求是内容应填充页面的其余部分。


问题答案:

而不是h-100在黄色内容区域上使用,而是添加一个额外的CSS类以使其高度可弯曲增长:1 …

.flex-fill {
  flex:1 1 auto;
}






<div class="container-fluid h-100 d-flex flex-column">
    <nav class="navbar navbar-expand-sm s-navbar">
        <a class="brand navbar-brand" href="/">Brand</a>
        <button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
            <span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
        </button>
        <div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                        <a class="dropdown-item" href="/Device">Sub menu</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/Test">Test</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="row flex-fill">
        <main class="col" style="background-color: yellow"></main>
    </div>
</div>

注:flex-fill实用程序类将包括在未来引导4.1版本



 类似资料:
  • 主要内容:实例,垂直导航栏,实例,居中对齐的导航栏,实例,不同颜色导航栏,实例,品牌/Logo,实例,实例,折叠导航栏,实例,导航栏使用下拉菜单,实例,导航栏的表单与按钮,实例,实例,导航栏文本,实例,固定导航栏,实例,实例导航栏一般放在页面的顶部。 我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。 导航栏上的选项可以使用 <ul> 元素并添加 class="na

  • 使用LeftBarItems和RightBarItems时,我遇到过过多的UIBarButtonItem填充/间距(请参见下图)。UIBarButtonims上使用的图标不包含额外的填充。我想知道是什么原因造成的?

  • 主要内容:实例,导航对齐方式,实例,垂直导航,实例,选项卡,实例,胶囊导航,实例,导航等宽,实例,胶囊下拉菜单,实例,选项卡下拉菜单,实例,动态选项卡,实例,胶囊状动态选项卡,实例如果你想创建一个简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类: 实例 <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Li

  • 我试图降低bootstrap 3.0导航栏的高度,该高度用于固定顶部行为。这里我使用的是代码。 HTML CSS 后果 从屏幕上看,导航条的输出减少了,但高度并没有减少。原始高度以粉红色显示。 上面的css脚本在bootstrap 2中几乎可以正常工作* 有没有办法适当降低高度。

  • 问题内容: 我有一个ListView,里面有一堆项目。如何使顶部和底部项目的顶部边距为10dp,底部项目的底部边距为10dp?现在,我可以在ListView上使用填充或边距来执行此操作,但是结果是,当您滚动ListView的边缘时,现在距屏幕底部10dp。反正这吗?我也尝试在适配器的getView方法内设置边距,但没有看到AbsListView.LayoutParams的任何边距选项。任何帮助都会

  • 问题内容: 我正在尝试为我的应用程序更改导航栏的高度。目前,高度固定为44。我可以从Xcode更改宽度,但不能更改高度。 我不知道该如何改变。iOS开发的新手。 谁能帮忙吗? 问题答案: 试试这个 :