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

尝试

向所有 <span class="head9"> 添加 bootstrap 预定义 pull-right 选择器，例如 <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;
}

Answer 2

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Business Name : </label><span class="head9">'.$name.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Website URL : </label><span class="head9">'.$url.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Tagline : </label><span class="head9">'.$tagline.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Description : </label><span class="head9">'.$descrip.'</span>
                </div>

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

                <div class="col-sm-6 col-md-3">
                    <label class="head6">Address : </label><span class="head9">'.$address.'</span>
                </div>

                <div class="col-sm-6 col-md-3">
                    <label class="head6">City : </label><span class="head9">'.$city.'</span>
                </div>

使用 bootstrap 网格对齐 4 列

align 4 columns using the bootstrap grid

html

css

grid

multiple-columns

twitter-bootstrap