侧边栏/导航栏是否计入 Bootstrap 3 中的列？答案

【问题标题】：Does a sidebar/navbar count towards columns in Bootstrap 3?侧边栏/导航栏是否计入 Bootstrap 3 中的列？
【发布时间】：2014-04-15 04:38:10
【问题描述】：

我正在开发一个 Bootstrap 3 网站并且有一个愚蠢的问题。我拥有的代码（没有编写，清理）有一个侧边栏导航栏，它嵌套在一个容器下，但 not 存在于 col-div 或行中。这是不正确的吗？目前的布局是：

<body>
  <section id="container"> (no class)
    <header/>
    <aside>
      <div id="sidebar" class="nav-collapse">
        <ul class="sidebar-menu" id="nav-accordion">
          <li class="sub-menu">
          ...
    </aside>
    <section id="main-content">
        <section class="wrapper site-min-height">
            <div>
              <div class="row-fluid">
                <div class="col-sm-6 pull-right">
                ...content...

好吧，现在我把它浓缩成这样，我看到层次结构中的任何地方都没有 class 容器......太棒了！不过，我原来的问题仍然存在：

导航侧边栏应该存在于 col-- div 中，还是位于“内容区域”中？我在想前者……

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

视情况而定。

如果您有多个rows，那么高柱（包含侧边栏）会使第一个row 非常高，从而破坏您的设计。

如果您的设计只有一个row 高，那么您可以将侧边栏放在col- 内。

在这两种情况下，最好的解决方案是像这样嵌套网格元素：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      ...Sidebar comes here...
    </div>
    <div class="col-md-8">
      <div class="row">
          A nested grid can come here with it's own columns.
      </div>
    </div>
  </div>
</div>

一个很好的例子：http://getbootstrap.com/examples/dashboard/

【讨论】：

“视情况而定”或多或少符合我的预期。该示例基本上是我正在寻找的，它确实在网格宽度计算（2+10、3+9）中包含了侧边栏和“内容”。然而，当侧边栏折叠时，这是否意味着剩余的可见列被重新计算（0+12），或者总数不再是 12，但它仍然有效（可能是因为它是一个流体容器）？
因为组件（侧边栏和内容区域）是 Sutton 'col-' 本身，所以当侧边栏折叠右侧块时，示例中的 'col-md-8' 变为 'col -md-12'
更正：当侧边栏在超小的屏幕尺寸上折叠时，它会是 'col-xs-12'