Question

我试图将navbar固定在屏幕的左侧，有效地放在sidebar中，其余的页面内容呈现在右侧。

目前，我尝试使用bootstrap列将页面拆分为两个，如下所示：

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}


/********************************************
*                                           *
*                                           *
*               WRAPPERS                    *
*                                           *
*                                           *
********************************************/

#sidebarWrapper {
  height: 100%;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: red;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.5s ease;
}


/********************************************
*                                           *
*                                           *
*             SIDEBAR NAV STYLE             *
*                                           *
*                                           *
********************************************/

.sidebar-nav {
  margin: 0;
  padding: 0;
  top: 0;
  list-style: none;
  position: absolute;
}

.sidebar-nav>li {
  display: inline-block;
  line-height: 20px;
  position: relative;
  width: 100%;
}


/********************************************
*                                           *
*                                           *
*                  DIV STYLE                *
*                                           *
*                                           *
********************************************/

.container-fluid {
  height: 100%;
}

.container-fluid h1 {
  padding: 0;
  margin: 0;
}


/********************************************
*                                           *
*                                           *
*              PAGE BODY STYLE              *
*                                           *
*                                           *
********************************************/

.header {
  height: 10%;
  background-color: yellow;
}

.contentBody {
  height: 80%;
  background-color: green;
}

.footer {
  height: 10%;
  background-color: blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-2">
      <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="sidebarWrapper">
        <ul class="nav sidebar-nav">
          <li>
            <a class="firstChild" href="/">Dashboard</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-lg-10">
      <div class="header">
        <h1>Header</h1>
      </div>
      <div class="contentBody">
        <h1>Content</h1>
      </div>
      <div class="footer">
        <h1>Footer</h1>
      </div>
    </div>
  </div>
</div>

但是，正如您从代码片段中看到的那样，我navbar似乎对任何引导列限制都有强制力，并占用了整个页面的宽度。

如何防止它这样做，以便它占用引导列宽度的100％但不多也不少？

Answer 1

你的id在css中有100％的高度，我认为你应该把它改成宽度：100％而不是。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="sidebarWrapper">

#sidebarWrapper {
  width: 100%;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: red;
  overflow-x: hidden;
  overflow-y: auto;
  transition: all 0.5s ease;
}

Answer 2

您需要进行2项更改才能解决问题。

首先指向一个工作引导样式表：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

其次，不要在不支持较小屏幕尺寸的情况下使用大型自举列。但是要获得所需的结果（并使用Bootstrap 4），请更改为：

...<div class="col-2">...
...<div class="col-10">...

Answer 3

因为导航栏具有固定位置，所以它不再具有固有宽度（在演示中它具有任何宽度的唯一原因是由right:0中的.navbar-fixed-top;声明引起的。

如果您希望导航栏的宽度与列宽相匹配，则需要在其上设置显式宽度。它可以是像素单位或百分比，但请记住，百分比是相对于视口宽度的。这是因为固定位置元素从文档流中取出，因此它们的尺寸是相对于视口计算的，而不是它们的父元素。

在您的演示中，您尝试匹配的列宽定义为16.66666667％（当视口宽度大于1200px时），因此如果您将导航栏设置为相同的宽度，则它们应匹配。

注意：Bootstrap可能有本机方法来定义固定位置navbar / element的尺寸。我对Bootstrap并不熟悉，所以我从一般的CSS角度回答。

Navbar增长超过自举列宽

3 个答案: