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

Answer 2

知道了！我调整了巴克的答案。您必须在最后一列之前添加clearfix div，但请确保它对于介质显示是隐藏的。

<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="clearfix visible-xs visible-sm hidden-md"></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 3

如果你改变

怎么办？

<div class="pull-left col-xs-6 col-sm-4 col-md-2"> 到

<div class="pull-left col-xs-6 col-sm-12 col-md-2">

Answer 4

正如BuddhistBeast所说，你只有大约12列可以使用，所以你需要找到一种方法将它们分成你想要的任何部分。

至于在A列下对齐C列，由于Bootstrap内容较少，因此自动将其置于B列下，因此更多空间（一个简单的修复就是向B添加更多内容），您可能会必须使用 clearfix 类重新对齐：

<div class="clearfix visible-xs-block"></div>

您可以在此处找到更多相关信息。这是demo我刚刚了解了你想要看到的内容。

Bootstrap不均匀的列顺序

4 个答案: