html - 如何在此 css 布局中均匀对齐左右内容

Question

我有一个网站，当窗口调整为移动尺寸时，我想在其中保留此布局(数据之间有边框)。右列中最多 10 个字符时一切正常，但当超过该字符时，它会跳到新行，并且内容不再与左侧的数据对齐。如您所见，“First | Lorem Ipsum”保持良好对齐，但“Second | Here's some wider content Lorem Ipsum”扰乱了整个布局。有没有办法以某种方式修复它？

这是 Codepen 的链接:http://codepen.io/anon/pen/MJWjJJ?editors=1100

.view__content--info p {
    font-weight: bold;
}

.view__content--border {
    border-left: 1px solid grey;
}

<div class="row">
  <div class="col-md-8">
    <div class="col-md-6 col-sm-6 col-xs-6 text-right view__content--info">
      <p>First</p>
      <p>Second</p>
      <p>Third</p>
      <p>Fourth</p>
      <p>Fifth</p>
      <p>Sixth</p>
    </div>
    <div class="col-md-6 col-sm-6 col-xs-6 view__content--border">
      <p>Lorem Ipsum</p>
      <p>Here's some wider content Lorem Ipsum</p>
      <p>Hello World</p>
      <p>Ipsum</p>
      <p>Something</p>
      <p>Here</p>
    </div>
  </div>
</div>

Answer 1

因为您正在使用 Bootstrap 。我建议你使用描述列表。它会给你想要的。

仅供引用:当您使用列类时，例如 .col-md-3 ，请始终使用行并将列放入其中

 <dl class="dl-horizontal"> 
  <dt>Description lists</dt>
  <dd>A description list is perfect for defining terms.</dd> 
  <dt>Euismod</dt>
  <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd>Donec id elit non mi porta gravida at eget metus.</dd> 
  <dt>Malesuada porta</dt>
  <dd>Etiam porta sem malesuada magna mollis euismod.</dd> 
  <dt>Felis euismod semper eget lacinia</dt>
  <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>

更多信息:http://getbootstrap.com/css/#description