Question

我正在创建一个网页关于我们部分，我有两个要求，两套文本'关于我们'和＆amp; '客户＆amp;反馈'。它们需要并排，我想要将它们分开。我正在使用bootstrap作为框架，我想知道是否有人可以告诉我如何让线路到位。

这是我的HTML：

<section id="section-two" class="section-two">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <h3>Placehold</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet unde.</p>
            </div>
            <div class="col-lg-6">
                <h3>Project Two</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
            </div>
        </div> 
    </div> 
</section>

Answer 1

在第一列使用border-right属性。

 border-right: 2px solid black;

Answer 2

添加边框，如@hars所说，但仅限于第一列

div.col-lg-6:nth-of-type(1){  border-right: 2px solid black; }

Answer 3

您可以使用它在两列之间添加一行 -

.col-lg-6 ~ .col-lg-6 {
    border-left: 1px solid red;
}

Working Fiddle

注意：即使您有两列以上，上述技术也能正常工作。 See this fiddle.

CSS / HTML文本之间的分隔线

3 个答案: