Bootstrap：集中行元素

我试过this和this的答案。但我没有成功：Bootstrap：集中行元素

<div class="container"> 
    <div class="btn-group-vertical"> 
      <div class="row row-eq-height" style="overflow: hidden"> 
       <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
        <button class="btn btn-default">hello</button> 
       </div> 
       <div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
        <span class="label label-success" 
            style="font-size: small; vertical-align: iddle;">World</span> 
       </div> 
      </div> 
    </div> 
</div>

我想World由hello元素集中。我怎么能做到这一点？

来源

2016-08-15 Rudziankoŭ

尝试：flex css3显示多个路线 – kollein

只需使用引导form-inline ..无需额外的CSS。

<div class="container"> 
    <div class="form-inline"> 
     <div class="form-group"> 
     <button class="btn btn-default">hello</button> 
     </div> 
     <div class="form-group"> 
     <span class="label label-success">World</span> 
     </div> 
    </div> 
</div>

http://bootply.com/ZjjHreVVjA

附： - btn-group-vertical用于vertical button groups，而不是垂直对齐。

来源

2016-08-15 14:44:21 ZimSystem

检查this link并搜索偏移类别。每行有12列。如果你给divcol-sm-6这个div取12个列中的6个，那么你有6个剩余（空）列。以此中心div，您可以用余数除以2：3（6/2 = 3）来抵消它。因此，如果您将col-sm-offset-3添加到div它将位于中心。

如何适用于你的问题： 把两个按钮中的一个div，并且使用上述方法居中。

编辑

你问我如何居中行元素，你不应该。在.row元素内部添加一个.container元素，并在该.container的内部添加您的列：col-device-size。

来源

2016-08-15 14:26:37 g3mini

这里是一个bootply：

.row-eq-height{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

来源

2016-08-15 14:34:08

有代码中的几个错误：

首先，你周围的BTN-组列，因此它打破了列，考虑到如果你围绕“btn-group”画了一条黑线，它只包括按钮外的轮廓（不是整行的宽度）。将来必须将btn-group放在按钮外（不包围列）。

即：

<div class = "btn-group"> <button class = "btn btn-default"> </button> <div>

我已经改变了你的自举类，使每列价值300米的cols和“推”的第二个两到右侧。这应该居中给予一定尺寸（对于较大规模的，你就必须与推类添加更多的列班）

   <div class="row row-eq-height" style="overflow:hidden"> 
        <div class="col-sm-3" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
         <button class="btn btn-default">hello</button> 
        </div> 
        <div class="col-sm-3 col-sm-push-2" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px; 
    padding-bottom: 99999px;"> 
         <span class="label label-success" 
             style="font-size: small; vertical-align: iddle;">World</span> 
        </div> 
      </div> 
    </div>

来源

2016-08-15 14:43:23 the12

Bootstrap：集中行元素

回答

相关问题