html - 使用 Bootstrap 网格对齐 4 列

Question

我有这个代码

<div class="panel-body">   
    <div class="col-sm-6">
        <label class="head6">Business Name : </label><span class="head9">'.$name.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Website URL : </label><span class="head9">'.$url.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Tagline : </label><span class="head9">'.$tagline.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Description : </label><span class="head9">'.$descrip.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Business Email : </label><span class="head9">'.$bemail.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">Address : </label><span class="head9">'.$address.'</span>
    </div>
    <div class="col-sm-6">
        <label class="head6">City : </label><span class="head9">'.$city.'</span>
    </div>
</div>  

基本上是这样的

我想要的是使用网格系统将变量缩进到彼此对齐的右侧，以便在调整浏览器大小时保持其响应能力。

Answer 1

尝试

添加预定义 Bootstrap pull-right所有选择器 <span class="head9">喜欢<span class="head9 pull-right">

Fiddle

或

<div class="col-sm-6">
  <div class="halfL">
    <label class="head6">Business Email : </label>
  </div>
  <div class="halfR">
    <span class="head9">'.$bemail.'</span>
  </div>
</div>

在你的CSS中

.halfL{
  width:50%;
  float:left;
}
.halfR{
  width:50%;
  float:right;
}