在小屏幕上仅使一个引导列弹出到其他三个下方

Posted 2023-03-06

【中文标题】在小屏幕上仅使一个引导列弹出到其他三个下方

【英文标题】：Make only one bootstrap column pop below other three on small screen

【发布时间】：2017-04-25 09:09:11

【问题描述】：

这是我在桌面时页脚的屏幕截图...

当我缩小屏幕时，我得到了这个凌乱的布局......

糟糕，理想情况下，我希望最右边的列像这样弹出在其他三个下方：

我尝试了很多方法都无济于事...这是我目前的网格布局...我可以弄清楚如何专门让正确的 col 出现在下面。

<div class="row">
    <div class="col-md-4">
        foo
    </div>
    <div class="col-md-2">
        bar
    </div>
    <div class="col-md-2">
        baz
    </div>
    <div class="col-md-4">
        qux
    </div>
</div>

【问题讨论】：

您能否将代码缩减到您要修复的页面的特定区域？

没问题！一秒..

【参考方案1】：

全部使用... col-xs, col-sm, col-md & col-lg... 它的超小、小、中和大视图

然后计算..在引导网格系统中每行有 12 列。

喜欢： 4 - 4 - 4 或， 4 - 2 - 2 - 4 或， 8 - 2 - 2 或任何你想要的 ;)

例如：如果你想在 col-lg-6 中使用两个 div，你将在 largeview 中的一行中有 2 列。如果你在 sm 中将它们都设置为 12，你会将它们作为两行中的一列在小视图中。

【参考方案2】：

<div class="row">
    <div class="col-md-4 col-xs-6">
    foo
   </div>
    <div class="col-md-2 col-xs-3">
        bar
    </div>
    <div class="col-md-2 col-xs-3">
        baz
    </div>
    <div class="col-md-4">
        qux
     </div>
 </div>

【讨论】：

很确定您希望以某种方式将底部 div 设置为 col-xs-12，因为他们希望整个部分跨越整个宽度。

感谢您抽出宝贵时间回复...为了记录，我不得不将 col-xs-12 添加到最后一列以使事情按预期工作。

哈哈，时机成熟！

@MattD 最后一列不需要声明col-xs-12，因为它是默认声明的。如果你努力仔细阅读引导文档，你就会发现。

您还可以在那里阅读一个惊人的事实：网格类适用于屏幕宽度大于或等于断点大小的设备，并覆盖针对较小设备的网格类。因此，例如将任何 .col-md-* 类应用于元素不仅会影响其在中型设备上的样式，而且如果 .col-lg-* 类不存在，也会影响大型设备上的样式。 因此，对于我们的案例 @987654324 @ = "col-lg-4 col-md-4 col-sm-6 col-xs-6"，以及"col-md-4" 等于"col-lg-4 col-md-4 col-sm-12 col-xs-12"