【问题标题】：Block that stay in line no matter the size of the screen无论屏幕大小如何，都保持一致的块
【发布时间】：2015-08-05 21:00:16
【问题描述】：

当窗口变得很窄时，我有一排不排成一行。绿色方块在另一个方块下面，这是正常现象吗？

我的意思是，因为它在 "row" 类中，并且因为我使用 xs 列加起来为 12，所以无论屏幕大小如何，它都应该保持一致。

这是我的代码（或者你可以去bootply）

    <div class="row" style="height:150px">  
      <div class="col-xs-1 bggrey" style="height:100%"></div>
      <div class="col-xs-6 bgblue" style="height:100%"></div>
      <div class="col-xs-2 bgred" style="height:100%"></div>
      <div class="col-xs-3 bggreen" style="height:100%"></div>
    </div>

我对代码的期望（如果窗口不太窄，则工作正常）

如果窗口变窄我会得到什么

【问题讨论】：

请在问题中包含您的 CSS。也就是说，这很可能是由于浏览器计算百分比的方式造成的。

标签： html css twitter-bootstrap

【解决方案1】：

我认为是 div 中默认填充的问题。当分辨率小于它破坏的所有填充的总和时。在您的代码中有 4 个 div，具有 30 个像素的填充，当它非常合适时，它就坏了。我将填充设置为零值，它可以工作

看到这个：http://www.bootply.com/jaSQxxUZuD#

css 中唯一的变化是

  .row > div { padding: 0 }

如果需要保留这些填充，可以防止断线：

  .row { white-space: nowrap; }

编辑

如果你需要保留这些填充，最好做内盒

  .row > div { box-sizing: border-box; }

使用最后一个类，您可以保留填充，但宽度不会像没有填充一样增加。

【讨论】：

好的，使用 "padding:0" 但在使用 "white-space:nowrap" 时无法获得预期的结果；
哦，是的，对不起。如果 col-* 是 display:inline-block ，它可以使用空格，但它不是。算了
我在我的答案中进行了编辑，也许如果你想保留填充，你的解决方案是 box-sizing。祝你好运！

【解决方案2】：

col-xs-1有一个padding-left和padding-right为15px，这意味着当屏幕宽度低于330px时，灰条的大小大于宽度的8.333%。

将填充设置为 0 以避免该问题。

【讨论】：

【解决方案3】：

有不同的可能性来解决这个问题。将其添加到 css 中至少应该这样做：

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-6{
    padding:0px;
}

【讨论】：