Bootstrap列垂直堆叠而不是水平堆叠

Kan*_*nav 6 css grid twitter-bootstrap

我有一行分为3列使用col-sm-4.现在我希望这一行水平分为三部分.但它是垂直划分的.

Jsfillde

这是我的代码

<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>
Run Code Online (Sandbox Code Playgroud)

我在左侧和右侧都有一个标志,有一排我想要水平分成3部分.

我究竟做错了什么?

cov*_*efe 10

你的代码工作得很好.这些.col-sm-*类适用于宽度768px及以上.如果你想让这三个div总是水平的,你必须.col-xs-4在你的情况下使用类.更新了jsfiddle

进一步阅读 - http://getbootstrap.com/css/#grid-options

  • Bootstrap v4的更新:对于xs视口大小,col-xs- *类已替换为col-*(例如col-4)。 (2认同)