Bootstrap 列垂直堆叠而不是水平堆叠
Bootstrap columns stacking vertically and not horizontally
我使用 col-sm-4
将一行分成 3 列。现在我希望这一行被水平分为三个部分。但是是纵向划分的。
这是我的代码
<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>
我在左侧保留了一个徽标,在右侧有一排我想水平分成 3 部分。
我做错了什么?
您的代码运行良好。 .col-sm-*
类 适用于 768px 及以上的宽度。如果你想让这三个 div 始终水平放置,你必须在你的情况下使用 类 .col-xs-4
。 Updated jsfiddle
我遇到了同样的问题并且束手无策。然后我刷新了浏览器,它工作了。
我使用 col-sm-4
将一行分成 3 列。现在我希望这一行被水平分为三个部分。但是是纵向划分的。
这是我的代码
<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>
我在左侧保留了一个徽标,在右侧有一排我想水平分成 3 部分。
我做错了什么?
您的代码运行良好。 .col-sm-*
类 适用于 768px 及以上的宽度。如果你想让这三个 div 始终水平放置,你必须在你的情况下使用 类 .col-xs-4
。 Updated jsfiddle
我遇到了同样的问题并且束手无策。然后我刷新了浏览器,它工作了。