Html 在并排具有相同类的两个列div之间添加间隙

我知道这是问了很多次，所以我找不到我的问题的答案。我使用了bootstrap，并尝试在一行中包含两列和六列。它如预期的那样工作，但我想要实现的是，我想消除他们之间的差距。看看我的意思，你可以查一下。 我不想覆盖这里的引导cols。我只想使用添加的类，它是

survey extra

HTML

<div class="container">
 <div class="row visit-redeem text-center">
   <h5>Visit Site To Redeem</h5>
 </div>
  <div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>FROM OUR SPONSORS</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>FREEBIES</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
</div>

我还尝试了

CSS3:nth-of-type（）选择器

，但没有成功

我只想用css来做这件事

---

尝试将额外调查放在col-xs-6中。希望能有所帮助

。额外调查{
背景：#1e90ff；
颜色：#fff；
填充：10px；
边界半径：10px；
文本转换：大写；
}

来自我们的赞助商
$0.00
免费赠品
$0.00

通过使用CSS将.survey extra的宽度设置为一个百分比，然后给出其中一个div（使用：nth-of-type（）选择器）或两个div的边距，我可以在两个div之间放置一个可视空间，如下所示：

.survey-extra {
    width: 45%;
    margin-right: 5px;
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra {
    background: #1e90ff;
    color: #fff;
    width: 45%;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(0) {
  float: left;
}

.survey-extra:nth-of-type(1) {
  float: right;
}

请在上查看。 当然，为了得到你想要的东西，你必须调整宽度百分比和边距

如果不想使用边距，也可以将宽度设置为百分比，然后使用浮动，如下所示：

.survey-extra {
    width: 45%;
    margin-right: 5px;
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra {
    background: #1e90ff;
    color: #fff;
    width: 45%;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(0) {
  float: left;
}

.survey-extra:nth-of-type(1) {
  float: right;
}

---

请使用floating on查看我找到了解决问题的方法，我想与您分享，以供将来参考。我所做的是添加第n个类型（2）并应用css

CSS:

HTML:

访问网站进行兑换
来自我们的赞助商
$0.00
免费赠品
$0.00

拨弄

---

如果您有超过1行，您可以将

最后一个子项

替换为

第n个子项（2n）

无需更改css，只需更改html如下：

<div class="container">
    <div class="row visit-redeem text-center">
        <h5>Visit Site To Redeem</h5>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FROM OUR SPONSORS</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FREEBIES</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
    </div>
</div>

访问网站进行兑换
来自我们的赞助商
$0.00
免费赠品
$0.00

是的，这就解决了问题。但是有没有办法只使用css而不是html进行修改？你不能，因为在两个大小为6的列之间添加空格会使它们无包装。你想设置自己的宽度。对不起，我知道这是可行的，但看看我更新的小提琴，第二行和第二列必须从顶部对齐。我找不到你更新的小提琴，但我添加了我的答案。也许这对你有用。是的，我找到了解决我问题的办法。感谢您的帮助@WimMertens的可能副本，谢谢您的帮助，但这不是我想要的答案。我不想在这里重写和使用引导cols。我想在这里只使用添加的类

额外调查

。好的，我已经添加了一个答案，希望这就是你想要的

.survey-extra {
  display: inline-block;
  float: none;
  margin: 0 2% 2% 0;
  width: 49%;
}

.survey-extra:last-child {
  margin-right: 0;
}

<div class="container">
    <div class="row visit-redeem text-center">
        <h5>Visit Site To Redeem</h5>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FROM OUR SPONSORS</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FREEBIES</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
    </div>
</div>