如何使Bootstrap列像單元格一樣工作

我試圖讓自舉列的行爲像td s一樣，或者找到其他方式使它們具有相等的高度和垂直居中的文本。我試過做display:table-cell黑客，但沒有成功。我在下面做錯了什麼？如何使Bootstrap列像單元格一樣工作

<div class="row like-table-row"> 
    <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10"> 
     <p> 
     Here's some text that will surely be long enough to go onto another line if I make it thiiiiiiiiiiiiiiiiiiiiiiiiiisssssssssssssssssssssssss long 
     </p> 
    </div> 
    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> 
     <p> 
      Here's some shorter text 
     </p> 
    </div> 
    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> 
     <p> 
      Blah  
     </p> 
    </div> 
</div> 
<div class="row like-table-row"> 
    <div class="col-xs-8 col-sm-10 col-md-10 col-lg-10"> 
     <p> 
     Here's some text 
     </p> 
    </div> 
    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> 
     <p> 
      Here's some shorter text 
     </p> 
    </div> 
    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> 
     <p> 
      Blah  
     </p> 
    </div> 
</div>

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

.row.like-table-row { display: table-row; } 
    .row.like-table.row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; }

來源

2016-03-24 Subpar Web Dev

你做的一切權利，除了去除float，

.row.like-table-row { 
    display: table-row; 
} 

.row.like-table.row > div { 
    display: table-cell; 
    vertical-align: middle; 
    border: 1px solid #000; 
    float:none; 
}

這應該工作很好。

P.S.我曾經使用這種技術很多，但自從Flexbox問世以來一直停止。

來源

2016-03-24 18:45:08

你在類名一個錯字：.row.like錶行> DIV。現在繼續，並刪除浮動以獲得垂直居中的div。我更新了你的提琴，以及（如果你不刪除浮動，它打破了表格佈局）https://jsfiddle.net/vikasbaru/DTcHh/18566/

.row.like-table-row > div { display: table-cell; vertical-align: middle; border: 1px solid #000; float: none; }

來源

2016-03-24 18:29:01

要使用垂直對齊，您需要一個容器，它具有垂直對齊屬性和要對齊的內部元素。

基本上你需要三個CSS規則：

.vertical-align { 
    height: 150px; /* Height is important or it won't work */ 
    display: table-cell; /* We will give our div table cell property */ 
    vertical-align: middle; /* This will do the trick to center vertically inner element */ 
}

所以你的HTML看起來像：https://jsfiddle.net/mb3kyzgp/1/

如果你需要動態的高度，我建議：

<div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> 
    <div class="vertical-align"> 
    <p>Foo bar</p> 
    </div> 
</div>

你上的jsfiddle例子使用jQuery來計算最高的元素，或者你可以設置你認爲你不會達到的高度（快速簡單但不是最好的）。

來源

2016-03-24 18:51:17 xWaZzo

正確的方法是使用.row作爲table和.col-*作爲table-cell。

.like-table { 
    display: table; 
    width: 100%; 
} 

.like-table > [class*=col-] { 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
}

我已將您的小提琴更新爲工作演示。 https://jsfiddle.net/rhythm19/DTcHh/33195/

來源

2017-06-02 15:42:12

如何使Bootstrap列像單元格一樣工作

回答

相關問題