2016-03-06 35 views
0

我有我想li留在底部coloumn不是頂部coloumn 這裏我的代碼力的文字留在底部coloumn引導3

<div class="row"> 
    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> 
       <p>lorem ipsum</p> 
       <h2>lorem ipsum</h2> 
      </div> 
      <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> 
       <div class="row"> 
       <div class="detil"> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2"> 
        <li>Lorem ipsum.</li> 
       </div> 
       </div> 
       </div> 
      </div> 
      <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"> 
       <h2>10</h2> 
       <p>Lorem ipsum.</p> 
      </div> 
      </div> 

CSS問題

h2,p{ 
    margin-top:0; 
    margin-bottom:0; 
} 

http://codepen.io/vicario/pen/eZJpov

正如你可以看到我的清單回到頂部,我如何讓它到底?

+0

DIV>裏?這是一些奇怪的標記。 – ZimSystem

+0

亞芬妮得到了答案 – vicario

回答

0

只是修復bug

我只需要添加類這樣

.row-eq-height { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
} 

和。更多設置

.detil { 
    position: absolute; 
    bottom: 0; 
}