Question

我试图让<div class="col-md-2 col-lg-2">中间的内容与中间对齐，但无济于事。我知道将列设置为2的大小不会填充12列的网格系统的空间，但我希望它与中间对齐，无论如何。

<div class="row">
    <div class="col-lg-12">
        <h1 class="content-header">Header</h1>
        <div class="row">
           <div class="col-md-2 col-lg-2">
               content
           </div>
           <div class="col-md-2 col-lg-2">
             content
           </div>
        </div>
    </div>

Answer 1

Bootstrap 4与Bootstrap 3一样，使用offset移动或居中整列。因此，在您的情况下，使用offset-*-4将其移动到12 col网格中的4个col。

<div class="row">
        <div class="col-lg-12 text-xs-center">
            <h1 class="content-header">Header</h1>
            <div class="row">
                <div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
                    content
                </div>
                <div class="col-md-2 col-lg-2">
                    content
                </div>
            </div>
        </div>
    </div>

要使内联元素（如文本）居中，请使用： text-center（这是3.x中的text-center

要将块元素（如DIV）或列居中，请使用： mx-auto（这是3.x中的center-block

演示：http://www.codeply.com/go/Wxzbd3a6og

Bootstrap 4中还有新的responsive alignment classes，因此您可以在不同的断点处进行不同的对齐。

Answer 2

发现了一个有效的CSS技巧

.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

Bootstrap 4行不对齐中间

2 个答案: