防止列包装在引导程序中

Question

与此问题类似Bootstrap 3 - grid with fixed wrapper - Prevent columns from stacking up我需要阻止我的引导列包装。

我遇到的问题是，如果超过12列，我需要它来保持不包装。就像使用col-xs一样，当你有12列时，第13个将会换行 - 如本例所示bootply http://www.bootply.com/n5KdXfK7gZ#

如果你从下图所示的bootply中查看HTML - 我希望第四列（备用.col-4）与前12列保持同一行。

<div class="container-fixed">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">spare .col-4</div>
  </div>
  <hr>
</div>

我需要我的附加列继续与前12行相同的行。我不介意他们滚动可见视口创建滚动条，但我不想让它们换行。

这样我可以有一个幻灯片进/出动画，类似于bootstrap uis carousel，接受我不能使用轮播，因为我需要它在桌面模式下表现完全不同。

我希望这是有道理的：）

Answer 1

LinKeCodes 你好。
要有 13 列，并且在调整大小时没有任何下拉到新行。

只需将屏幕的视图宽度除以13，然后创建自己的col-13类 你需要写一些像这样的CSS ......

.col-13 {
    width: calc((100vw / 13 ) - 1vw); 
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    float: left;
}

这是一个有用的 Fiddle 供您查看。

希望这可以帮助您在这里找到正确的方向。

添加到此
以下是使用overflow-x: scroll;更新的 Fiddle ，以帮助您执行要添加的内容，但隐藏第13个区块。