Bootstrap 3 网格系统答案

【问题标题】：Bootstrap 3 Grid SystemBootstrap 3 网格系统
【发布时间】：2014-08-10 01:54:32
【问题描述】：

我正在将我的一个项目从 bootstrap 2 迁移到 bootstrap 3。现在，我遇到了一些我无法理解的网格布局问题。我有一个 col-md-12，我想在这个较大的 div 中添加 3 列等宽的列。从逻辑上讲，这 3 列都应该是 col-md-4。但是，当我添加 col-md-4 类的 3 列（div）时，它们不适合，其中之一被推下，并且在第二个之后的末尾留下了一些空间。请有人帮我理解我可能遗漏的东西。谢谢。

【问题讨论】：

这可能因站点而异，具体取决于 jQuery 插件和自定义 CSS。请向我们提供更多信息。
@Denny，听起来您可能在某些列上使用了额外的 padding-left 或 padding-right？

标签： html css twitter-bootstrap-3

【解决方案1】：

Bootstrap 的列布局宽度只能是 12 个“单位”。

要归档等宽的列，您应该平均拆分 12 个（col-md-* 中 * 的总和应该是 12）。

【讨论】：

Denny 在他的问题中说得对..." 我有一个 col-md-12，我想在这个较大的 div 中添加 3 列等宽的列。从逻辑上讲，这 3 列应该是 col- md-4."，所以我认为这不是问题。

【解决方案2】：

听起来问题是填充。当您嵌套了 col-xx-# 类时，Bootstrap 会自动添加填充。如果您将col-md-4 作为col-md-12 的直接子级，则引导程序将添加填充，而您的第三个col-md-4 将在新行结束。

你在做什么：

<div class="container">
    <div class="row">
         <div class="col-md-12">
             <div class="col-md-4">
                 1/3
             </div>
             <div class="col-md-4">
                 2/3
             </div>
             <div class="col-md-4">
                 3/3
             </div>
         </div>
    </div>
</div>

要解决此问题，请在您的第一个 col-md-4 上方添加一个新的 class="row"，或者像这样删除 col-md-12：

<div class="container">
    <div class="row">
        <div class="col-md-4">
             1/3
         </div>
         <div class="col-md-4">
             2/3
         </div>
         <div class="col-md-4">
             3/3
         </div>
    </div>
</div>

【讨论】：