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

在这种情况下，您需要做的就是将 class 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>

偏移 class 会将第 4 个 div 向右推（偏移）6 个单位，即另一个 div 的大小。偏移 class 中的 sm 意味着：该偏移只会在小屏幕 (sm) 或更大的屏幕上启动，但不会在最小的屏幕上启动。

Bootstrap 4 个网格未正确对齐

Bootstrap 4 grid not correctly aligning up

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4