使用引导网格对齐 4 列答案

【问题标题】：align 4 columns using the bootstrap grid使用引导网格对齐 4 列
【发布时间】：2015-09-17 10:14:15
【问题描述】：

我有这个代码

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

基本上是这样的

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

【问题讨论】：

标签： html css twitter-bootstrap grid multiple-columns

【解决方案1】：

试试

将引导程序预定义的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;
}

【讨论】：

它离右边的 div 太近了......我怎么能把它往左边调整一点
它向右但不与左侧对齐，即使您增加填充，它也太靠右了。
@Shehary 之前从未真正使用过pull-right，谢谢，我相信这也是更好的解决方案
@li0n_za，我只是路过，看到您努力帮助 OP，所以想帮您一把，而不是发布另一个答案。
我遇到了另一个问题..它不是移动响应:(

【解决方案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>

【讨论】：