Question

我第一次玩bootstrap 4中的push和pull类。我相信我做的一切都是正确的，但没有任何事情发生，我很难过。

我在本页底部做了几次尝试：

http://andycharlton.co.uk/

甚至直接从bootstrap网站复制HTML。但他们没有按照他们的意愿工作（即8 col应该在右边，4 col应该在左边）

我想我犯了一个非常基本的错误，但我无法弄清楚我做错了什么。

由于

编辑 - 我并不认为这里的代码会特别有用，但已被请求，现在是：

<div class="row">
   <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
   <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Answer 1

请注意，在Bootstrap 4中，.push-*和.pull-*类被.order-*类替换，因为网格系统现在基于flexbox。

这个新系统也使标记更轻，只需以下面的代码段为例。在某些情况下，不是在两列上设置订单（例如另一列上的.push-md-3和.pull-md-9），而是将其设置在一列上就足够了。

另外值得注意的是，在“标准”.order{-sm|-md|-lg|-xl}-*课程旁边，还有一套方便的回复.order-first课程。

<div class="container">
    <div class="row">
        <div class="col-md-9">
            [.col-md-9]
        </div>

        <div class="col-md-3 order-md-first">
            [.col-md-3 .order-md-first]
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

推/拉不工作

1 个答案: