Question

我有一个网站，我希望在将窗口调整为移动尺寸时保持此布局（数据之间有边框）。右列中的所有内容都可以处理大约10个字符，但是如果有更多内容，它会跳转到新行，并且内容不再与左侧的数据对齐。正如你所看到的，“First | Lorem Ipsum”保持良好对齐，但“Second |这里有一些更广泛的内容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

Answer 2

您可以这样尝试：对于每个项目，您创建一个新行。如果宽度太小而且创建了新行，则两列都将向下移动，而不是向右移动。

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

如何在此css布局中平均对齐左右内容

2 个答案: