Twitter Bootstrap，在中型设备上居中第三列md-6

Question

<div class="row">
    <div class="col-md-6 col-lg-4">foo</div>
    <div class="col-md-6 col-lg-4">bar</div>    
    <div class="col-md-6 col-lg-4">baz</div>
</div> 

考虑到在中型设备上，这将打印其他两列下面的最后一列，我如何将其水平居中？

img

Answer 1

您需要插入justify-content-center并使用button以获得更好的解决方案，您可以根据需要使用button、div或span tag，示例代码如下

​

<div class="row">
<!-- 1 -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="justify-content-center">
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    <a href="" class="btn col-md-2 bg-primary text-white p-1">1</a>
    </div>
    </div>
    <!-- end 1 -->
    
    <!-- One -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="row justify-content-center">
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    <div class="col-md-3 bg-danger text-white">
    <h1>One</h1>
    </div>
    </div>
    </div>   
    <!-- end One -->
    
    <!-- Uno -->
    <div class="col-md-6 col-lg-4 text-center">
    <div class="row justify-content-center">
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    <span class="col-md-3 bg-success text-white">
    Uno
    </span>
    </div>
    </div>
    <!-- end Uno -->
    
    
</div> 

​

显示

​

Answer 2

您可以使用这个类在中型设备上将div居中。

<div class="col-md-6 col-lg-4 text-md-center">baz</div>