html - 防止列在 Bootstrap 中换行

Question

类似这个问题Bootstrap 3 - grid with fixed wrapper - Prevent columns from stacking up我需要防止我的 Bootstrap 列换行。

但是，我遇到的问题是，如果超过 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 列在同一行上继续。我不介意它们是否滚动离开可见视口(viewport)以创建滚动条，但我不希望它们换行。

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

我希望这是有道理的:)

Answer 1

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

只需将屏幕的 View 宽度除以 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 给你看看。

希望这可以帮助您在这里走上正轨。

添加到这里
这是更新的 Fiddle 使用 overflow-x: scroll; 来帮助完成您想添加的内容，但隐藏第 13 个 block 。