Question

我有一系列包含列中信息的页面，但我似乎无法在列之间获得可见的边框。基本格式的HTML和CSS如下：

<div class="row central">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">
            <img class="img-responsive sub_img" src="images/zz_image.jpg" alt="Image">
            </div>
            <div class="col-md-6">
                <h2>heading</h2>
            </div>
        </div>
        <p>Text.</p>
    </div>
        <div class="col-md-6">
        <div class="row">
            <div class="col-md-6">

        <img class="img-responsive sub_img" src="images/zz_image2.jpg" alt="Image">
                </div>
            <div class="col-md-6">
                <h2>heading2</h2></div></div>
            <p>Text</p>
    </div>
</div>

.central{
    background-color: white;
    margin: 2px;
}

正文的背景颜色为#808080，这会在行之间产生水平线。我还想要的是两列之间的垂直线，当屏幕缩小时，它应该切换到它们之间的水平线，第二列低于第一列，但我没有做到这一点。

我尝试将.central样式应用于列，但它们不再并排显示，因此不是。

Answer 1

为（主要的）提供另一个类名，并为其指定所需颜色的边框。

<div class="row central">
<div class="col-md-6 setborder">
    <div class="row">
        <div class="col-md-6">
        <img class="img-responsive sub_img" src="images/zz_image.jpg" alt="Image">
        </div>
        <div class="col-md-6">
            <h2>heading</h2>
        </div>
    </div>
    <p>Text.</p>
</div>
    <div class="col-md-6 setborder">
    <div class="row">
        <div class="col-md-6">

    <img class="img-responsive sub_img" src="images/zz_image2.jpg" alt="Image">
            </div>
        <div class="col-md-6">
            <h2>heading2</h2></div></div>
        <p>Text</p>
</div>

<style>
 .setborder{
 border:solid;
 border-color:#808080;
  </style>

div之间的边距没有显示

1 个答案: