Question

我有一个非常简单的设置，看起来像这样：

<div class="row">
        <div id="whoarewe" class="offset-2 col-lg-4 col-md-4 col-xs-12 col-sm-12"></div>
        <div id="whatwedo" class="col-lg-4 col-md-4 cold-sm-12 col-xs12>
        </div>
 </div>

问题是，在响应模式下，ID #whoarewe仍具有2列偏移，因此未与#whatwedo垂直对齐。我有什么办法可以简单地通过media query来做到这一点？还是在col-xs和col-sm中有一个引导程序属性可以解决这个问题？

我尝试设置col-lg-offset-2和col-sm-offset-0，但这没用：（

谢谢。

Answer 1

我想出了一种适用于我的情况的解决方案，基本上是使用名为row的{{1}}属性，如下所示：

justify-content-around

Answer 2

<div class="row">
    <div id="whoarewe" class="col-md-4 offset-md-2"></div>
    <div id="whatwedo" class="col-md-4"></div>
</div>

有关正确的偏移量类，请参阅文档： https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

否则，您可以根据需要调整列宽并通过调整内容来做一些灵活的魔术

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

如何在Bootstrap 4中以响应模式删除偏移

2 个答案: