【问题标题】:Bootstrap columns stacking vertically and not horizontallyBootstrap 列垂直堆叠而不是水平堆叠
【发布时间】:2015-05-16 20:21:28
【问题描述】:

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

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>

我在左侧保留了一个徽标,在右侧有一行我想水平分成 3 部分。

我做错了什么?

【问题讨论】:

    标签: css twitter-bootstrap grid


    【解决方案1】:

    您的代码运行良好。 .col-sm-* 类适用于宽度 768px 及以上。如果你想让这三个 div 总是水平的,你必须在你的情况下使用 .col-xs-4 类。 Updated jsfiddle

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

    【讨论】:

    • Bootstrap v4 更新:col-xs-* 类已替换为 col-*(例如 col-4),用于 xs 视口大小。
    【解决方案2】:

    我遇到了同样的问题,我束手无策。然后我刷新了浏览器,它工作了。

    【讨论】:

    • 不知道为什么会有这么多反对票。它真的可以帮助某人
    猜你喜欢
    • 2018-05-11
    • 1970-01-01
    • 2019-04-04
    • 2011-03-22
    • 1970-01-01
    • 2019-10-10
    • 1970-01-01
    • 2016-08-29
    相关资源
    最近更新 更多