Bootstrap 4 在右侧而不是左侧偏移 - 类似于偏移，但在 div 的右侧而不是左侧创建空间答案

【问题标题】：Bootstrap 4 offset on the right not the left - like offset but creates space on the right side of a div not the leftBootstrap 4 在右侧而不是左侧偏移 - 类似于偏移，但在 div 的右侧而不是左侧创建空间
【发布时间】：2019-12-20 14:49:00
【问题描述】：

这个现有问题与引导程序 3 相关： Bootstrap 3 offset on right not left

我想找到一个 Bootstrap 4 示例，其中左侧 div 在右侧有空间，以防止下一个兄弟 div 位于同一行，就像 offset 将 div 推到右侧（但相反）一样？

我希望在一行中有多个动态 div，并使用 1 或 2 个类来强制这些 div 中的任何一个单独被推到其所在行的左侧，并且下面的 div 像此代码一样位于下一行确实，（但没有空 div 作为间隔）：

<style>
    .row {
        background: #f8f9fa;
        margin-top: 20px;
    }

    .col {
        border: solid 1px #6c757d;
        padding: 10px;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col col-3 offset-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
        <div class="col col-3">
            1 of 1
        </div>
        <div class="col col-9">

        </div>
        <div class="col col-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
    </div>
</div>

尽管此代码通过使用额外的 div 填充空间来实现结果，但这并不理想，因为我希望能够遍历我的数据并为每个数据元素创建 div，而不必添加额外的 div 来实现此结果，当然有一个类修饰符方法可以使用引导程序来做到这一点。

【问题讨论】：

没有简单的方法来实现这个 AFAIK。你不能在不添加另一个 div stackoverflow.com/questions/29732575/… 的情况下强制 flexbox 子项中的换行/中断

标签： html css bootstrap-4

【解决方案1】：

我们已尝试使用选择器解决您的问题。请尝试此代码。

.row {
        background: #f8f9fa;
        margin-top: 20px;
    }

    .col {
        border: solid 1px #6c757d;
        padding: 10px;
    }
    .row > [class*="col"]:nth-child(4n){
      margin-right: 75%;
    }

<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">
    <div class="row">
        <div class="col col-3 offset-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
        <div class="col col-3">
            1 of 1
        </div>
        <div class="col col-3">
            1st of 3
        </div>
        <div class="col col-3">
            2nd of 3
        </div>
        <div class="col col-3">
            3rd of 3
        </div>
    </div>
</div>

【讨论】：