为什么 Bootstrap 布局无法正确显示容器内的行？答案

【问题标题】：Why Boostrap layout doesn't display correctly with row inside container?为什么 Bootstrap 布局无法正确显示容器内的行？
【发布时间】：2013-04-01 04:53:35
【问题描述】：

我正在使用引导响应较少的文件。我有这样的布局：

<body>
<div id="wrapper">
  <div id="container" class="container">
    <div id="header"></div>
    <div id="contentwrap" class="row">
      <div id="content" class="span8">
        <!-- some content -->
      </div>
      <div id="sidebar" class="span4">
        <!-- sidebar content -->
      </div>
    <div>
  </div>
</div>
</body>

如果我对 contentwrap div 使用 row 类，那么 contentwrap div 会在左侧溢出（宽度为 1200 像素，而容器 div 的宽度为 1170 像素）。如果我对 contentwrap div 使用 row-fluid 类，那么侧边栏不会显示在侧面，而是显示在内容 div 下方。

html 有问题吗？我是否正确使用了引导脚手架？

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

尝试将row 和span* 类与其他类和ID 分开。

<body>
<div id="wrapper">
  <div id="container" class="container">
    <div id="header"></div>
    <div id="contentwrap">
      <div class="row">
        <div class="span8">
          <div id="content">
             <!-- some content -->
          </div>
        </div>
        <div class="span4">
           <div id="sidebar">
             <!-- sidebar content -->
           </div>
        </div>
      </div>
    <div>
  </div>
</div>
</body>

【讨论】：

margin 和 padding 计入框宽度。