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：集中行元素

回答

相關問題