css - Bootstrap 3 的对齐问题

Question

我有一个 2 行布局，第一行有 1 列，第二行有 3 列。文本在一列中左对齐，第二行中的三列都居中对齐，如下所示:

我想做的是以某种方式将一列中的文本与 3 列布局中第一项的左边缘对齐，但我不确定这是否可能？ (至少在不使用 js 的情况下)。有没有使用 Bootstrap 类执行此操作的简单方法？

Answer 1

您可以将顶部文本放在与“居中 1”相同的容器中，然后使用 position:absolute 将其向上移动。参见 fiddle :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;}