对齐引导网格

Question

所以我正在使用引导程序编写一个网站，一个简单的问题困扰着我。 基本上我会有一个容器，里面有一行，里面有 3 col-lg-4 列。我的问题是列没有居中，也没有填充行。例如http://www.connornorvell.com/misc/stack-example.png

如您所见，标题“johnny”应位于屏幕右侧，标题“rafael”应居中。

我尝试向我的 div 添加居中和居中的类，但它不起作用（居中只是居中对齐文本）。

代码如下：

<div class="container breathing-room-bottom">
  <div class="row">
    <div class="col-lg-4">
        <p class="sans" style="font-weight:500; text-align:;">Connor Norvell
          <br>
          <span2 style="color:#828282;">Art Director
          <br>(555) 555 - 5555
          <br>connor@mggall.com</span2>
        </p>
      </div>
      <div class="col-lg-4">
        <p class="sans" style="font-weight:500; text-align:;">Rafael De La Vega
          <br>
          <span2 style="color:#828282; font-weight:500;">Art Director
          <br>(555) 555 - 5555
          <br>rafael@mggall.com</span2>
        </p>
      </div>
      <div class="col-lg-4">
        <p class="sans" style="font-weight:500; text-align:;">Johnny Presslaur
          <br>
          <span2 style="color:#828282;">Art Director
          <br>(555) 555 - 5555
          <br>johnny@mggall.com</span2>
        </p>
      </div>
    </div>
 </div>

一切都是引导程序，除了.sans（使文本无衬线）和.breathing-room-bottom（在容器底部添加 5% 的填充。

Answer 1

您必须将text-align 设置为在此小提琴的第一列和最后一列中居中，或者使用引导对齐类text-center，就像在中间列中一样（我推荐这种方法）。

https://jsfiddle.net/michelefenu/3eL4f1a7/

Answer 2

我想你想将text-align 设置为left、center 和right 我已经做了一个Plunker here

Answer 3

Bootstrap 有许多用于样式的内置类。学习它们，使用它们。

http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

http://getbootstrap.com/css/#type-alignment

在这种情况下，您想要的类是：text-left、text-center、text-right

希望对你有帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container breathing-room-bottom">
  <div class="row">
    <div class="col-xs-4 text-left">
      <p class="sans" style="font-weight:500;">Connor Norvell
        <br>
        <span2 style="color:#828282;">Art Director
          <br>(555) 555 - 5555
          <br>connor@mggall.com</span2>
      </p>
    </div>
    <div class="col-xs-4 text-center">
      <p class="sans" style="font-weight:500;">Rafael De La Vega
        <br>
        <span2 style="color:#828282; font-weight:500;">Art Director
          <br>(555) 555 - 5555
          <br>rafael@mggall.com</span2>
      </p>
    </div>
    <div class="col-xs-4 text-right">
      <p class="sans" style="font-weight:500;">Johnny Presslaur
        <br>
        <span2 style="color:#828282;">Art Director
          <br>(555) 555 - 5555
          <br>johnny@mggall.com</span2>
      </p>
    </div>
  </div>
</div>