html - 对齐自举网格

Question

所以我正在使用 bootstrap 编写一个网站，一个简单的问题困扰着我。 基本上我会有一个容器，里面有一排，里面有 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% 的填充)外，一切都是 Bootstrap 。

Answer 1

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>