使用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对齐跨度

回答

相关问题