Bootstrap 4网格未正确对齐

Question

我试图创建一个Bootstrap 4的网格系统，如果可能的话，它会保持在一行内，但是我试图让它调整起来的方式是不行的。

目前看起来像这样：

这就是我想要做的事情：

    <div class="row">
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
    </div>

Answer 1

在这种情况下你需要做的只是将类offset-sm-6添加到第4个div中，如下所示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3 offset-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-3"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
        <div class="col-sm-6"><div class="card"><div class="card-block">This is some text within a card block.</div></div></div>
    </div>
</div>

该偏移类将向右推动（偏移）第4个div 6个单位，即另一个div的大小。偏移类中的sm表示：该偏移仅在小（sm）或更大但不在最小屏幕上的屏幕上启动。