html - 如何在列之间创建分隔Bootstrap之类的块？

我创建一个包含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>

最佳答案

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

关于html - 如何在列之间创建分隔Bootstrap之类的块？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46332374/