我的盒子CSS之间的边距

Question

我有3个盒子

我希望他们之间有一些差距。一旦我添加保证金，第三行就会进入下一行。这是代码：

CSS：

#hotels {
    background: url('../img/PICS/19427110_ml.jpg');
    background-size: 100%;
    height:10px;
    color:whitesmoke;
}

.contenhotelsclass {
    border-radius:10px;
    padding: 70px;
    height: 700px;
    background: rgba(0, 0, 13, 0.6);
}
.contentsfirst {

    padding-top: 100px;
    padding-bottom: 100px;


}

---

如果我添加

.marginyes {
    margin: 0 30px;
}

下一行发生了。

---

HTML：

<section id="hotels">
    <div class="row">
        <div class="col-md-12 contentsfirst" id="contenthotels">
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/18911510_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['training']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['training']->wording , 400, '...') }}</span>
                <span ><p style="padding-top: 30px;"><button id="trainbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass marginyes">
                <img src="{{ URL::asset('img/PICS/20360155_m.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['taste']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['taste']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="eatbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
            <div class="col-md-4 contenhotelsclass">
                <img src="{{ URL::asset('img/PICS/31786072_ml.jpg') }}" class="img-circle img-responsive"> </img>
                <span><h2>{{ Str::upper($wording['relax']->container) }}</h2></span>
                <span style="padding-top: 100px">{{ Str::limit($wording['relax']->wording ,400,'...') }}</span>
                <span><p style="padding-top: 30px;"><button id="relaxbutton" class="btn btn-success">Read more!</button></p></span>
            </div>
        </div>
    </div>
</section>

---

我正在使用bootstrap 3。

我怎么解决这个问题？

Answer 1

有一个解决方案。 改变你的DOM

<强>旧

 <div class="col-md-4 contenhotelsclass">
              ........
 </div>

新

<div class="col-md-4">
<div class="contenhotelsclass">
.....
</div>
</div>

添加以下css：

.contenhotelsclass {margin:0px 10px;}

jsFiddle http://jsfiddle.net/mp9napL3/1/

Answer 2

首先，我不明白你使用margin: 0 30px;的原因，我通常只使用margin:30px;。

其次，答案是你的盒子之间有很多间距，你的浏览器只是把最后一个盒子放在下一行。使用更广泛的浏览器，你的第3个盒子不会进入下一行。

Answer 3

很明显，你使用col-md-4意味着25％的父级，当你设置额外的余量时你的div覆盖率超过25％，唯一的方法是覆盖col-md-4类并减少宽度25％到更少。