引導3 -

Question

行

內底部對齊列我有兩個引導列的行內，所以：

<div class="row"> 
    <div class="col-xs-6 mainBox"> 
     <h1>Heading</h1> 
     <h2>Sub Heading</h2> 
    </div> 
    <div class="col-xs-6 mainBox buttonBox"> 
     <button class="btn btn-primary">Button</button> 
    </div> 
</div> 

我想第二列是底部行中的垂直對準。我如何實現這一目標？

這裏是一個演示小提琴：
http://jsfiddle.net/RationalGeek/6pYhx/

Answer 1

嘗試使用position: absolute;和設置bottom0的：

.row { 
    position: relative; 
} 
.mainBox { 
    border: solid thin black; 
}  
.buttonBox { 
    position: absolute; 
    bottom:0; 
    right:0; 
} 

http://jsfiddle.net/6pYhx/3/

Answer 2

雖然絕對位置是速戰速決，更強勁與許多列一起工作的解決方案會更好。

這是我在這updated fiddle的解決方案。

[class*='cols-'].row > *{ 
    float: none; 
    position: relative; 
    display: inline-block; 
    /* old ie fixes */ 
    *zoom: 1; 
    *display: inline; 
} 

.row.cols-bottom > *{ 
    vertical-align: bottom; 
} 

.row.cols-middle > *{ 
    vertical-align: middle; 
} 

和HTML：

<div class="row cols-bottom"> 
    <div class="col-xs-4"> 
     <h3>Heading</h3> 
     <h4>Sub Heading</h4> 
    <!-- The lack of space between div tags below does MATTER --> 
    </div><div class="col-xs-4"> 
     <button class="btn btn-primary">Button </button> 
    <!-- The lack of space between div tags below does MATTER --> 
    </div><div class='col-xs-4'> 
     This col should be 3 
    </div> 
</div> 

有一對夫婦的事情，在我的解決方案注意。所使用的內嵌塊策略允許定位div列以保留在文檔流中，同時還允許使用垂直對齊樣式。爲了您的方便，我已經包含了底部對齊和中間對齊的樣式（我傾向於像往常一樣使用中間對齊）。

第二個要注意的是，你必須有每個相應的結局柱</div>及起始列<div>會見之間沒有空間。這是因爲內聯塊爲任何字符（包括空格字符）提供「空間」。實質上，這是因爲空格字符具有給定的字體大小，最終推動最左列下方的最右邊的列。有黑客來克服這一點，但他們是注意跨瀏覽器兼容，所以我沒有包括他們。因此，我的解決方案是免費的，並與多列工作。請享用！

Answer 3

建立在邁克的解決方案，這裏是一個不關心divs之間的空間。它不使用內聯，而是使用display：table和display：cell。

[class*='cols-'] { 
    display:table; 
} 
[class*='cols-'] > * { 
    float: none; 
    position: relative; 
    /* old ie fixes */ 
    *zoom: 1; 
    *display: inline; 
    display: table-cell; 
} 
.cols-bottom > * { 
     vertical-align: bottom; 
} 
.cols-top > * { 
     vertical-align: top; 
} 

//extra bonus if needed 
.p-top { 
    vertical-align: top; 
} 

plunker更新：從邁克和JPH解決方案http://jsfiddle.net/6pYhx/325/

Answer 4

大廈，這使得COL-12的行爲予以保留。它在純CSS中不完美並且有點冗長，但是起作用。

/* Vertical Align Columns */ 
[class*='cols-'] { 
    display:table; 
} 
.cols-bottom > * { 
    vertical-align: bottom; 
} 
.cols-middle > * { 
    vertical-align: middle; 
} 
.cols-top > * { 
    vertical-align: top; 
} 

/* Resets for col-12 classes */ 
@media (min-width: 1200px) { 
    [class*='cols-'] > *:not(.col-lg-12) { 
     float: none; 
     position: relative; 
     /* old ie fixes */ 
     *zoom: 1; 
     *display: inline; 
     display: table-cell; 
    } 
} 
@media (min-width: 992px) and (max-width: 1199px) { 
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12) { 
     float: none; 
     position: relative; 
     /* old ie fixes */ 
     *zoom: 1; 
     *display: inline; 
     display: table-cell; 
    } 
} 
@media (min-width: 768px) and (max-width: 991px) { 
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12) { 
     float: none; 
     position: relative; 
     /* old ie fixes */ 
     *zoom: 1; 
     *display: inline; 
     display: table-cell; 
    } 
} 
@media (max-width: 767px) { 
    [class*='cols-'] > *:not(.col-lg-12):not(.col-md-12):not(.col-sm-12):not(.col-xs-12) { 
     float: none; 
     position: relative; 
     /* old ie fixes */ 
     *zoom: 1; 
     *display: inline; 
     display: table-cell; 
    } 
} 

Answer 5

這裏是另一實施
http://jsfiddle.net/RationalGeek/6pYhx/

<div class="row row-eq-height"></div> 

的CSS：

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
} 
.mainBox { 
    border: solid thin black; 
} 

.buttonBox { 
    vertical-align:center; 
    margin-top: auto; 
    margin-bottom: auto; 
} 

Answer 6

我知道我張貼在非常舊線，但我我一直在尋找解決同一問題的方法。我認爲一個簡單的解決方案可能是在行上使用display: flex;，並在你想要的列上使用margin-top: auto;。這是基於OP的demo fiddle。

*請注意* - 這正在改變row類，可能會有意想不到的副作用。您可能想要在新班級中實施它，只在需要的地方應用。