html - 使用 Bootstrap 对齐跨度

Question

我正在制作一个显示用户个人信息的网页，我想使用 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;
    }

Answer 1

您可以尝试使用 display table-row 和 display table-cell

结果:jsfiddle

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

}

结果:jsfiddle

.test span{
  display: table-cell;
 }

或者使用 Bootstrap ，您可以将测试 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>