html - 如何在像 block 一样的 Bootstrap 列之间创建分隔？

Question

我创建一行包含 4 列。

我想要列之间的分隔，当用户悬停在列中时，它会改变背景。

看起来像这样:

当前我的演示如下:

我将鼠标悬停在一列中，它会自动在另一列中显示颜色。

这是我的代码:

#cate-web-section {
    background: #007ece;
}

.feature-cate {
    font-size: 4rem;
    margin: 0 0 2rem 0;
    text-align: center;
    color: #fff;
}

.feature-cate p {
    margin: 0 0 1rem 0;
    font-size: 2rem;
}

.feature-cate a {
    font-size: 1.7rem;
     color: #fff;
}

.feature-cate:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feature-cate i {
    font-size: 7rem;
    margin: 0 0 2rem 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cate-web-section" class="mid-level-padding">
    <div class="container-fluid">
        <div class="row feature-cate">
            <h4>Thiết Kế Website Đa Lĩnh Vực</h4>
        </div>
        <div class="row feature-cate">
            <div class="col-sm-3">
                <div class="section-cate">
                    <i class="fa fa-building-o" aria-hidden="true"></i><p>Bất Động Sản</p><a href="http://">Xem chi tiết</a>
                </div>
            </div>
            <div class="col-sm-3"><i class="fa fa-newspaper-o" aria-hidden="true"></i><p>Tin Tức</p></div>
            <div class="col-sm-3"><i class="fa fa-bolt" aria-hidden="true"></i><p>Sản Phẩm/Dịch Vụ</p></div>
            <div class="col-sm-3"><i class="fa fa-shopping-cart" aria-hidden="true"></i><p>Bán Hàng Online</p></div>
        </div>
    </div>
</div>

Answer 1

@itodd 已经在评论中回答了你的问题，这里只是一个演示:

#cate-web-section {
    background: #007ece;
}

.feature-cate {
    font-size: 4rem;
    margin: 0 0 2rem 0;
    text-align: center;
    color: #fff;
}

.feature-cate p {
    margin: 0 0 1rem 0;
    font-size: 2rem;
}

.feature-cate a {
    font-size: 1.7rem;
     color: #fff;
}

.feature-cate > .col-sm-3:hover {
    background: rgba(255, 255, 255, 0.1);
}

.feature-cate i {
    font-size: 7rem;
    margin: 0 0 2rem 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="cate-web-section" class="mid-level-padding">
    <div class="container-fluid">
        <div class="row feature-cate">
            <h4>Thiết Kế Website Đa Lĩnh Vực</h4>
        </div>
        <div class="row feature-cate">
            <div class="col-sm-3">
                <div class="section-cate">
                    <i class="fa fa-building-o" aria-hidden="true"></i><p>Bất Động Sản</p><a href="http://">Xem chi tiết</a>
                </div>
            </div>
            <div class="col-sm-3"><i class="fa fa-newspaper-o" aria-hidden="true"></i><p>Tin Tức</p></div>
            <div class="col-sm-3"><i class="fa fa-bolt" aria-hidden="true"></i><p>Sản Phẩm/Dịch Vụ</p></div>
            <div class="col-sm-3"><i class="fa fa-shopping-cart" aria-hidden="true"></i><p>Bán Hàng Online</p></div>
        </div>
    </div>
</div>