Bootstrap 4从中心偏移

Question

我想在该中心的页面中央创建一个col，我想要另一个与它稍微偏移的地方，但这会影响中心。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
    <div class="row justify-content-center">
        <div class="col-auto">
            <ul class="list-inline">
                <li class="list-inline-item">Lorem ipsum</li>
                <li class="list-inline-item">Lorem ipsum</li>
                <li class="list-inline-item">Lorem ipsumus</li>
                <li class="list-inline-item">Lorem ipsum</li>
            </ul>
        </div>
        <div class="col-3 offset-1">test</div>
    </div>

图片：https://i.imgur.com/8BK73oF.png
我该如何在Boostrap 4中做到这一点

Answer 1

如果我理解您的问题，您希望列表所在的块始终水平居中吗？

首先，您希望偏移量块具有col-3，并且偏移量为offset-1。总共四列。因此，如果要使列表块居中，则左侧也必须有4列块。因此，列表块应采用4列，即col-4。

<div class="row">
    <div class="col-4 ml-auto">
        <ul class="list-inline">
            <li class="list-inline-item">Lorem ipsum</li>
            <li class="list-inline-item">Lorem ipsum</li>
            <li class="list-inline-item">Lorem ipsumus</li>
            <li class="list-inline-item">Lorem ipsum</li>
        </ul>
    </div>
    <div class="col-3 offset-1">test</div>
</div>

小提琴： https://jsfiddle.net/aq9Laaew/91196/