Bootstrap 列在行和容器内的平衡答案

【问题标题】：Bootstrap columns break even inside rows and containersBootstrap 列在行和容器内的平衡
【发布时间】：2016-08-16 12:30:35
【问题描述】：

所以我正在使用 Bootstrap 3 和一些 LESS 混合构建一个网页。

每当我尝试进行两列布局时，比如说使用.make-sm-column(4); 和.make-sm-column(8);，右列总是溢出到下一行。

我知道要考虑到15px 的padding-left 和padding-right，您需要将列放在一行中，并且该行位于容器内。在基本层面上，我使用的 LESS 看起来像：

.container {
  .container();
  //...

  .content {
    .make-row();

    .col1 {
      .make-md-column(8);
    }

    .col2 {
      .make-md-column(4);
    }
  }
}

不过，出于某种原因，这些列对于容器来说似乎太宽并且会折断。有什么我看不到的明显我错过的东西吗？我现在唯一的解决办法是删除padding-left/right，但那很麻烦，当然删除这个排水沟不会让两列看起来干净整洁，而不需要我做任何额外的工作。

【问题讨论】：

您是否检查了浏览器控制台以查看应用了哪些 CSS 规则？对于引导程序，col-md-* 有一个 { float: left; } - .col1, .col2 有一个吗？
@Kenney，是的，.col1 具有样式：float: left; width: 66.66666667%; position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; 而.col2 具有相同的样式，但 width 是 33.33333333%

标签： html css twitter-bootstrap twitter-bootstrap-3 less

【解决方案1】：

当您删除填充时，它会被修复？

这一定是盒子尺寸的问题。填充使列大于指定的宽度。将属性更改为： box-sizing: border-box; 应该这样做。

【讨论】：

工作就像一个魅力！谢谢。