Маржа между моей коробки CSS

Question

У меня есть эти 3 коробки

, и я хочу, чтобы иметь некоторый запас Inbetween них. Как только я добавляю маржу, третий идет в следующую строку. Вот код:

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> 

---

Я использую самозагрузку 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;} 

Jsf iddlehttp://jsfiddle.net/mp9napL3/1/

Answer 2

Во-первых, я не понимаю, почему вы используете margin: 0 30px;, я обычно использую только margin:30px;.

Во-вторых, ответ заключается в том, что у вас так много интервалов между вашими боксами, ваш браузер просто помещает последний ящик на следующую строку. Используйте более широкий браузер, и ваш третий ящик не перейдет на следующую строку.

Answer 3

Очевидно, что вы используете col-md-4 означает 25% от родителя, и когда вы устанавливаете дополнительный запас, ваш div охватывает более 25%, единственный способ - переопределить класс col-md-4 и уменьшить ширину от 25% до менее.