引导：行水平居中的内容与包装内容

顶行有一定的水平居中的内容，例如锚中的徽标图像;
下面的行应该包含6个盒子，所有盒子都有一个固定的宽度并且它们各自的内容水平居中。当视口缩小时，我想让这些盒子像文本一样重新排列，以便生成的行不会包含不同数量的框。例如，在XS尺寸的情况下，每行只有一个盒子;在SM中，每行有2个;在其他尺寸，我有3每行。

我设法让这个工作在this Bootply（我给div打上了颜色，以便你可以很容易地看到发生了什么）。

现在，我希望这些行中的盒子沿着一个理想的中线水平居中，将视口切成两半，这样，当每行有1个盒子时，其中心与其顶部行锚点的中心对齐，当我有2个盒子时，它们必须与这个理想的中线距离相同;当我有3个盒子时，中间盒子应该被这个中线切成两半。总之，这个视图中的所有内容都应该水平居中，在同一个容器div中的两行中。

鉴于我的盒子有一个固定的预定义宽度（除了最终在XS尺寸，我只是让它们为容器div宽度的100％，就其内容水平居中而言），我可以尝试通过在媒体查询中增加利润率来手动微调;但这似乎不是一个非常稳健的方法，并且在BS3预定义宽度（AFAIK，最大767 xs，最小768 sm，最小992 md，最小1200 lg）之间的几个中等分辨率情况下可能会失败。

综上所述示例代码，我的HTML是这样的：

<div class="container"> 
    <div class="row" id="head"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> 
      <div style="position:relative"> 
       <div> 
        <a href="#"> 
         <img alt="Head" style="width: 150px;height:150px"> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row row-fluid" id="gallery"> 
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mit-box"> 
      <div class="center-block"> 
       <img alt="Alpha"> 
       <h3>Alpha</h3> 
       <ul> 
        <li><a>Alpha item 1</a></li> 
        <li><a>Alpha item 2</a></li> 
        <li><a>The last alpha item</a></li> 
       </ul> 
      </div> 
     </div> 
     <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 mit-box"> 
      <div class="center-block"> 
       <img alt="Beta"> 
       <h3>Beta</h3> 
       <ul> 
        <li><a>Beta item 1</a></li> 
        <li><a>Beta item 2</a></li> 
        <li><a>The last beta item</a></li> 
       </ul> 
      </div> 
     </div> 
     <!-- other boxes here, up to 6 ... --> 
    </div> 
</div>

而且我的相关风格：

div.mit-box { 
    height: 200px; 
    background-color: #ffffc0; 
} 
@media(max-width:767px) { 
    div.mit-box > div { 
     display: inline-block; 
     width: 100%; 
     text-align: center; 
     margin: 10px; 
     height:180px; 
     padding-top:5px; 
    } 
} 
@media(min-width:768px) { 
    div.mit-box > div { 
     display: inline-block; 
     width: 285px; 
     text-align: center; 
     margin: 10px; 
     height:180px; 
     padding-top:5px; 
     background-color: #c0ffc0; 
    }  
}

任何人都可以提出一个布局，这是最好的策略？

来源

2016-03-04 Naftis

这个替换您的风格：

div.mit-box { 
 
    height: 200px; 
 
    background-color: #ffffc0; 
 
    /* add padding here */ 
 
} 
 
div.mit-box > div { 
 
    display: inline-block; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 180px; 
 
    padding-top: 5px; 
 
    background-color: #c0ffc0; 
 
}

基本上你内心#c0ffc0彩色格现在是全宽和栏之间的间距可以通过添加填充被照顾的外部div。这里是Bootply。

希望这会有所帮助。

来源

2016-03-04 19:19:09 maRShmallow

谢谢，这工作得很好！ – Naftis

引导：行水平居中的内容与包装内容

回答

相关问题