如何使用 bootstrap 根据 lg and/or md 类型对齐 div？

Question

我需要根据 md and/or lg 类型的设备对齐 divs，如附图所示。

使用我编写的代码..它正在将第 9 列 div 推到第 3 列 div 下面..

请帮我解决这个问题..

html我用的是...

<div class="col-lg-12 col-md-9">

col 1 <div class="col-lg-3 col-md-3 col-lg-push-9"> col 3 </div> <div class="col-lg-9 col-md-9"> col 2 </div>

Answer 1

这对你有用。使用“pull-right”class 而不是您拥有的 push class。这应该可以解决问题。

这是您要求的 lg 和 md 示例：

<div class="col-lg-12 col-md-9">
    <!-- Content -->
</div>
<div class="col-lg-3 col-md-3 pull-right">
    <!-- Content -->
</div>
<div class="col-lg-9 col-md-9">
    <!-- Content -->
</div>

这是 lg, md, sm 如果您想在较小的屏幕尺寸下向侧面添加额外的 space。

<div class="col-lg-12 col-md-9 col-sm-8">
    <!-- Content -->
</div>
<div class="col-lg-3 col-md-3 col-sm-4 pull-right">
    <!-- Content -->
</div>
<div class="col-lg-9 col-md-9 col-sm-8">
    <!-- Content -->
</div>

请在此处查看示例：Example

此致！

如何使用 bootstrap 根据 lg and/or md 类型对齐 div？

How to align divs according to lg and/or md type using bootstrap?

twitter-bootstrap

angular-ui-bootstrap