提问者:小点点

Bootstrap 4行未对齐中间[重复]


我试图让中的内容在中间对齐,但没有效果。我知道将列设置为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>

共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;
}

匿名用户

引导程序4与引导程序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.codepley.com/go/wxzbd3a6og

在Bootstrap 4中也有新的响应式对齐类,所以您可以在不同的断点对齐。