html - 导航栏变得比 Bootstrap 列宽度更宽

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 似乎强行突破了任何 Bootstrap 列限制并占据了整个页面的宽度。

我怎样才能阻止它这样做，以便它占用 Bootstrap 列宽度的 100%，但不多也不少？

Answer 1

因为导航栏的位置固定，所以它不再具有固有宽度(它在您的演示中具有任何宽度的唯一原因是由于 right:0; 中的声明。导航栏固定顶部)。

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

在您的演示中，您尝试匹配的列宽被定义为 16.66666667%(当视口(viewport)宽度超过 1200 像素时)，因此如果您将导航栏设置为相同的宽度，那么它们应该匹配。

注意:Bootstrap 可能具有用于定义固定位置导航栏/元素尺寸的 native 方法。我对 Bootstrap 不是很熟悉，所以我是从一般的 CSS Angular 回答的。