twitter-bootstrap 防止列在引导程序中换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32845124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent columns from wrapping in bootstrap
提问by LinKeCodes
Similar to this question Bootstrap 3 - grid with fixed wrapper - Prevent columns from stacking upI need to prevent my bootstrap columns from wrapping.
类似于这个问题Bootstrap 3 - 带有固定包装的网格 - 防止列堆积我需要防止我的引导列包装。
The issue I have however is that I need it to persist the not wrapping if more than 12 columns. As even with col-xs once you've got 12 columns, the thirteenth will wrap - as seen in this example bootply http://www.bootply.com/n5KdXfK7gZ#
然而，我遇到的问题是，如果超过 12 列，我需要它来保持不换行。与 col-xs 一样，一旦您有 12 列，第 13 列将换行 - 如本示例所示，bootply http://www.bootply.com/n5KdXfK7gZ#
If you look at the HTML from my bootply pictured below - I want the fourth column (spare .col-4) to stay on the same row as the first 12 columns.
如果您查看下图所示的 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>
I need my additional columns to continue on the same row as the first 12. I don't mind if they scroll off the visible viewport creating a scroll bar, but I do not want them to wrap.
我需要我的附加列与前 12 列在同一行上继续。我不介意它们是否从可见视口中滚动出来创建滚动条，但我不希望它们换行。
This is so that I can have a slide in / out animation, similar to bootstrap uis carousel, accept that I cannot use carousel, as I need it to behave completely differently when in deskop mode.
这样我就可以有一个滑入/滑出动画，类似于 bootstrap uis carousel，接受我不能使用 carousel，因为我需要它在桌面模式下表现得完全不同。
I hope this makes sense :)
我希望这是有道理的 ：）
回答by AngularJR
LinKeCodesHi there.
To have 13columns and to not have any drop down to a new row when resized.
LinKeCodes你好。
有13列并且在调整大小时没有任何下拉到新行。
Just divide the view width of the screen by 13, and create your own class of col-13.
You would need to write some css like this...
只需将屏幕的视图宽度除以 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;
}
Here is a working Fiddlefor you to look at.
这是一个工作小提琴供您查看。
Hope this can help to get you on the right track here.
希望这可以帮助您走上正轨。
ADDED TO THIS
Here is an updated Fiddleusing overflow-x: scroll;to help do what you want to add but hide the 13th block.
添加到
这里 这是一个更新的Fiddle，overflow-x: scroll;用于帮助执行您想要添加但隐藏第 13 个块的操作。
