Bootstrap 3的对齐问题

Question

我有一个2行布局，第一行有1列，第二行有3列。文本在一列中左对齐，第二行中的三列全部居中对齐：

我想要做的是以某种方式将一列中的文本与3列布局中第一项的左边缘对齐，但我不确定这是否可行？ （至少不使用js）。使用引导类是否有一种简单的方法可以做到这一点？

Answer 1

您可以将顶部文字放在同一个容器中作为＆＃39;居中1＆＃39;，然后使用position：absolute将其向上移动。请参阅小提琴：https://jsfiddle.net/avgh4x67/。

HTML：

<div id='above'></div>
<div class='container'>
<div class='row'>
  <div class='col-sm-4'>
    <div>
      Centered 1
      <div id='centered-1-aligned'>aligned</div>
    </div>
  </div>
  <div class='col-sm-4'>
    <div>Centered 2</div>
  </div>
  <div class='col-sm-4'>
    <div>Centered 3</div>
  </div>
</div>
</div>

CSS：

#above {height: 80px; border: solid 3px red; margin-bottom: 10px;}
.col-sm-4 {text-align:center; border: solid 3px red; }
.col-sm-4 > div {display:inline-block;}
#centered-1-aligned {text-align: left; position: absolute; top: -80px;}