保持列之间的间隙：Bootstrap 3.3.7答案

【问题标题】：Keeping a gap between columns : Bootstrap 3.3.7保持列之间的间隙：Bootstrap 3.3.7
【发布时间】：2020-10-20 20:59:13
【问题描述】：

所以基本上我需要在我的列之间保持间隙，下面的代码显示了没有间隙的页面：

    <head>
        <link rel="stylesheet" type="text/css"
              href="<c:url value="/resources/css/bootstrap-3.3.7-dist/css/bootstrap.css"/>">
        <link rel="stylesheet" href="<c:url value="/resources/fonts/font-awesome-4.6.3/css/font-awesome.css"/>">
    </head>

    <body>
    <div class="container-fluid">
                <c:forEach items="${categories}" var="category" varStatus="itemIdx">
                    <div class="row" style="padding: 20px">
                        <h2>${category.name}</h2>

                            <c:forEach items="${category.menuProductBeanList}" var="product" varStatus="itemIdx">
                                    <div class="col-xs-6" style="border: 2px solid darkgrey; ">
                                            <div class="col-xs-5" style="float: left; padding: 5px;">
                                                <h3 style="font-weight: bold">${product.name}</h3>
                                                    ${product.description}
                                                <p>${currency} ${product.price}</p>
                                            </div>
                                            <div class="col-xs-4" style="float: right">
                                                <div style="width: 150px; height: 150px; overflow: hidden">
                                                    <img src="https://i2.wp.com/www.foodrepublic.com/wp-content/uploads/2012/03/033_FR11785.jpg?fit=1000%2C665&ssl=1" alt="pic" class="img-thumbnail" style="width: 100%; height: 100%; border: none">
                                                </div>
                                            </div>
                                    </div>
                            </c:forEach>

                    </div>
                </c:forEach>
    </div>
    </body>
</html>

基本上在上面的代码中，我将产品和类别列表作为模型属性发送并显示在列中。

我需要在列之间有间隙，所以我想为每个列添加一个边距，也就是循环之后的列

<div class="col-xs-6" style="border: 2px solid darkgrey; margin:5px">

但这只会导致每一列都在整行中，而不是如图所示并排（2x2）并留有间隙：

请帮助我，如果我能在代码中找到解决方案会更好。

为了您的信息，我只能使用 Bootstrap 3.3.7

【问题讨论】：

标签： html css spring-boot jsp twitter-bootstrap-3

【解决方案1】：

这是另一个问题How do I add spacing between columns in Bootstrap? 您可以使用 css 填充来分隔它们..

<div class="col-md-6 box">
    <div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
    <div class="inner">Hello</div>
</div>

CSS

    .box {
    padding: 0 5px 0 5px;
}
.box .inner {
    background-color: #fff;
}

【讨论】：

您还有其他解决方案吗？