html - 增加 2 个 Bootstrap 列之间的间距

Question

我的网页有一个连续 5 位 DJ 的列表。我试图在它的右侧放置广告。

这是没有广告的样子

转换广告后是这样的

如何增加 2 个连续列之间的间距？我认为这可以通过更 retrofit 订线宽度和下载自定义的 Bootstrap 文件来完成，但我认为会有一种更简单的纯 CSS 方法来处理这个问题。

这是我的 HTML

<div class="container">
    <div class="col-md-11">
        <div class="row">
            <div class="col-md-2 col-md-offset-1 text-center">
                <!-- DJ 1 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 2 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 3 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 4 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 5 -->
            </div>
        </div>
        <div class="row">
            <div class="col-md-2 col-md-offset-1 text-center">
                <!-- DJ 1 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 2 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 3 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 4 -->
            </div>
            <div class="col-md-2 text-center">
                <!-- DJ 5 -->
            </div>
        </div>
        ....
    </div>
    <div class="col-md-1">
        <div class="edm-sides" align="right">
            <!-- ad-1 -->
        </div>
        <div class="edm-sides" align="right">
            <!-- ad-2 -->
        </div>
    </div>
</div>

Answer 1

使用 CSS 改变宽度有效

.dj-md-2{
    width:18%;
}

添加dj-md-2到 div <div class="col-md-2 dj-md-2">