使用Bootstrap對齊跨度

我正在處理顯示用戶個人信息的網頁，並且我想使用Bootstrap垂直對齊以紅色顯示的跨度。使用Bootstrap對齊跨度

以下是我的表格截圖：

，這裏是我使用的HTML/CSS代碼：

HTML

<table class="table">    
    <tbody>    
    <div class="col-sm-6 test"> 
    <span class=""><strong >First Name: </strong></span> 
    <span class="" style="color:red" >FirstName</span> 
    </div> 
    <div class="col-sm-6 test"> 
    <strong class="">Age: </strong> 
    <span class="" style="color:red">Age</span> 
    </div> 

    <div class="col-sm-6 test"> 
    <strong class="">Last Name: </strong> 
    <span class="" style="color:red">LastName</span> 
    </div> 

    <div class="col-sm-6 test" > 
    <strong class="">Status: </strong> 
    <span class="" style="color:red">Status</span> 
    </div> 
    </tbody> 
    </table>

CSS

.test{ 
    border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px; 
    }

來源

2016-03-01 Qarchli Ismail

您可以指定COL-XX-NN類橫跨過，我相信，有效對齊它們。 – dmaij

他們看起來像是垂直對齊 – ZimSystem

您可以嘗試使用顯示錶行和顯示錶細胞

結果：jsfiddle

.test{ 
border-top: 1px solid #e2eae9; vertical-align: middle; padding: 6px 8px; 
display: table-row; 

}

結果：jsfiddle

.test span{ 
    display: table-cell; 
}

或者使用引導程序，可以使您的測試div爲行，跨度爲列：

<div class="row test"> 
    <span class="col-sm-6"><strong >First Name: </strong></span> 
    <span class="col-sm-6" style="color:red" >FirstName</span> 
</div>

來源

2016-03-01 11:16:38 silviagreen

如果你的意思是疊加下的「標籤」的紅色文字，那麼你可以做這樣的事情：

<table class="table">    
    <tbody>    
    <div class="col-sm-6 test"> 
    <span class="col-sm-12"><strong >First Name: </strong></span> 
    <span class="col-sm-12" style="color:red" >FirstName</span> 
    </div> 
    <div class="col-sm-6 test"> 
    <strong class="col-sm-12">Age: </strong> 
    <span class="col-sm-12" style="color:red">Age</span> 
    </div> 

    <div class="col-sm-6 test"> 
    <strong class="col-sm-12">Last Name: </strong> 
    <span class="col-sm-12" style="color:red">LastName</span> 
    </div> 

    <div class="col-sm-6 test" > 
    <strong class="col-sm-12">Status: </strong> 
    <span class="col-sm-12" style="color:red">Status</span> 
    </div> 
    </tbody> 
    </table>

來源

2016-03-01 11:19:14 Ultradiv

使用Bootstrap對齊跨度

回答

相關問題