防止列包装在引导程序中

Question

类似于这个问题Bootstrap 3 - 带固定包装的网格 - 防止列堆叠我需要阻止我的引导列包裹.

然而,我遇到的问题是,如果超过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;
}

这是一个工作小提琴,你可以看看.

希望这有助于让您在这里走上正轨.

加入到这一
这里是一个更新的小提琴使用overflow-x: scroll;,以帮助你想要添加,但隐藏在13块的东西.