使用Bootstrap对齐Spans

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> 

Answer 2

如果您要将红色文本堆叠在“标签”下，那么您可以执行以下操作：

<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>