防止列在引导程序中换行

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，接受我不能使用 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 供您查看。

希望这可以帮助您走上正确的道路。

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