Bootstrap 4 网格未正确对齐答案

【问题标题】：Bootstrap 4 grid not correctly aligning upBootstrap 4 网格未正确对齐
【发布时间】：2018-02-20 10:33:04
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 twitter-bootstrap-4

【解决方案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 的大小。而 offset 类中的 sm 意味着：该偏移量只会在很小 (sm) 或更大的屏幕上生效，但不会在最小的屏幕上生效。

【讨论】：

非常感谢，非常感谢，这太完美了！