Question

我想将嵌套网格的对齐集中在bootstrap中。我一直在尝试一些方法，似乎无法正确行事。这是嵌套网格的代码：

<div class="row">
    <div class="col-md-2">
        <div class="row">
            Row 1, Col 1
        </div>
        <div class="row">
            Row 2, Col 1
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            Row 1, Col 2
        </div>
        <div class="row">
            - Row 2, Col 2 +
        </div>
    </div>
</div>

Answer 1

将一个类附加到内部行

.centerAlign{
    text-align:center;
}

<div class="col-md-2">
    <div class="row centerAlign">
        Row 1, Col 2
    </div>
    <div class="row centerAlign">
        - Row 2, Col 2 +
    </div>
</div>

Answer 2

如果你想在中心对齐任何东西然后在CSS中使用这个标签：

 text-align:center;

我在这里使用<div class="row">

在中心对齐Div Class

.row{
    
    text-align:center;
}

<div class="row">
    <div class="col-md-2">
        <div class="row">
            Row 1, Col 1
        </div>
        <div class="row">
            Row 2, Col 1
        </div>
    </div>
    <div class="col-md-2">
        <div class="row">
            Row 1, Col 2
        </div>
        <div class="row">
            - Row 2, Col 2 +
        </div>
    </div>
</div>

乐意帮助。谢谢

将嵌套列引导中心

2 个答案: