CSS Bootstrap 列垂直而不是水平堆叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29047702/
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
Bootstrap columns stacking vertically and not horizontally
提问by Kanav
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
我有一行使用col-sm-4. 现在我希望这一行被水平分成三个部分。但它是垂直分割的。
See on Jsfillde
Here's my code
这是我的代码
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<a href=""><img src="themes/custom/img/logo.png" width="120" alt="logo"/></a>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
我在左侧保留了一个标志，在右侧有一排，我想将其水平分成 3 部分。
What am i doing wrong?
我究竟做错了什么？
回答by Indy
Your code works just fine. The .col-sm-*classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4in your case. Updated jsfiddle
你的代码工作得很好。这些.col-sm-*类适用于宽度 768px 及以上。如果你想让这三个 div 总是水平的，你必须.col-xs-4在你的情况下使用类。更新了 jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
回答by MisterO
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
我遇到了同样的问题，并且不知所措。然后我刷新了浏览器，它工作了。
