如何在这个CSS布局

我有一个网站，我想保持这种布局（与数据之间的边界），当窗口被调整至移动尺寸同样对齐左右的内容。一切正常的情况下，最多可以有10个字符的右列，但是当有更多的字符跳到新的一行时，内容不再与左侧的数据对齐。正如你所看到的，“First | Lorem Ipsum”保持良好对齐，但“Second | Here's一些更宽的内容Lorem Ipsum”扰乱了整个布局。有没有办法解决它以某种方式？如何在这个CSS布局

这里的链接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>

来源

2017-01-03 Smithy

你现在的样子这样做并不是一个很好的选择来获得你正在寻找的东西。更改html结构。 – Aslam

您可以强制文字留在一条线，但是这不是很好的解决方案，恕我直言...... – sinisake

可以设置'.view__content - 边界{空白：NOWRAP;}'但我之前大家的意见一致 – Banzay

当你正在使用的引导。我建议你使用描述列表。它会给你想要的。

FYI：当您使用列类如.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>

来源

2017-01-03 11:11:27 Aslam

你可以试试这样说：对于每个项目创建一个新的行。当宽度太小并且创建新行时，两列将向下移动，而不是仅右列。

<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>

来源

2017-01-03 11:10:55 Pie

如何在这个CSS布局

回答

相关问题