html - Bootstrap 不均匀列顺序

Question

使用 Bootstrap，我有三个高度不同的列。中间的列最短。我的问题是，随着屏幕尺寸的减小，右栏只是在中间栏下滑动。我想让它做的是一直向左滑动。

进一步解释: 在手机上使用时，我希望 A 列和 B 列并排(列宽为 6)，并且我希望 C 列在 A 列下方对齐。随着屏幕变大，我希望所有列都彼此相邻在同一条线上。

这是我的示例代码:

<div class="container">
    <div class="row">
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
            <div>Column A</div>
        </div>
        <div class=" col-xs-6 col-sm-5 col-md-3">
            <div>Column B</div>
            <div>Column B</div>
            <div>Column B</div>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-2">
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
            <div>Column C</div>
        </div>
    </div>
</div>

我尝试使用推拉，但无法正常工作。我只是假设有可能实现我想要做的事情。我错了吗？谢谢!

Answer 1

网格系统的工作方式是每行有 12 列。您的 HTML 将超过 12 列。更具体地说，你可以在你的 col-xs-6 类中看到这一点，它在每一列中，实际上是 18，而不是 12。换句话说，只需确保单个列中的所有列行，加起来为 12。看看下面修改后的 HTML 来了解一下:

<div class="container">
<div class="row">
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
        <div>Column A</div>
    </div>
    <div class=" col-xs-4 col-sm-4 col-md-4">
        <div>Column B</div>
        <div>Column B</div>
        <div>Column B</div>
    </div>
    <div class="pull-left col-xs-4 col-sm-4 col-md-4">
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
        <div>Column C</div>
    </div>
</div>
</div>

只需调整列并确保加起来达到 12。此外，您可以在网格系统 here 上找到更多信息。 .

DEMO