Question

当屏幕收缩时，我试图在列环绕时保持一些Bootstrap列居中。

我的代码如下所示：

＆＃13;

    <div class="container">       
         <div class="row">
            <div class="col-md-2">    
            </div>
            <div class="col-md-8 text-center">
            	<div style="font-size:36px;">Page Title</div> 
            </div>
            <div class="col-md-2">          
            </div>
        </div>  
        
        <div class="row text-center">
            <div class="col-md-2">    
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">WWW</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">XXX</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">YYY</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">ZZZ</div>  
            </div>
            <div class="col-md-2">         
            </div>
        </div> 
      </div>

＆＃13;

在上面的代码中，＆＃39;页面标题＆＃39;当屏幕宽度减小时，文本会在屏幕上水平居中，这正是我想要的。我还希望四列在折叠到两列时保持水平居中，然后折叠到一列但上面的代码导致列在包装时在col-md-8中保持对齐。是否有可能确保col-md-2柱被包裹它们保持水平居中？

Answer 1

您的内容在类div的容器text-left内左对齐。如果您使用Bootstrap类text-center，它将居中。

另外关于你的列布局，我认为你正在使用这些内联宽度来对抗Bootstrap样式。我将删除它们并尝试使用Bootstrap自己的类，如下所示：

<div class="container">       
     <div class="row">
        <div class="col-md-2">    
        </div>
        <div class="col-md-8 text-center">
            <div style="font-size:36px;">Page Title</div> 
        </div>
        <div class="col-md-2">          
        </div>
    </div>  

    <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???    
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">WWW</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">XXX</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">YYY</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">ZZZ</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???         
        </div>
    </div> 
  </div>

这将为每个div提供“xs”大小（超小或移动）的全宽列，然后在“sm”大小（小）它们将增长到50％，然后在md （中）他们会缩小到1/6。

这是一个引导您的参考：http://www.bootply.com/t9XqPsBOpB

如何使折叠的Bootstrap列保持居中

1 个答案: