Question

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

正如你所看到的标题＆＃34; johnny＆＃34;应该触摸屏幕的右侧和标题＆＃34; rafael＆＃34;应该集中。

我尝试将以行为中心和以col为中心的类添加到我的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

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>

Answer 2

我认为你想要text-align设置为left，center和right我已成为了一个Plunker here

Answer 3

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

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

对齐引导网格

3 个答案: