twitter bootstrap 3.0 rc1 не использует желоба между определенными столбцами

.rounded-box(@border; @radius; @bg-color: transparent; @padding: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   padding: @padding;
}

У меня есть миксин, создающий поле со скругленными углами, на скриншоте ниже вы можете видеть, что он не имеет интервала между каждым div, к каждому из которых применяется .make-column(4).

* Я включаю bootstrap.less в свой основной файл less и запускаю lessc для компиляции, и это на снимке экрана, который вы видите, шириной более 990 пикселей. Любая помощь приветствуется.

введите здесь описание изображения

@rounded-box-radius: 10px;
@rounded-box-border: #ccc;
@rounded-box-height:230px;
@box-bg-color: #eee;

.article {
    .make-column(4);
}

.promo {
    .make-column(4);
    .visible-lg;
    .rounded-box(@rounded-box-border, @rounded-box-radius);
    height: @rounded-box-height;
} // promo end

HTML

<div class="promo">
    Promo
</div>

<div class="article">
    <h3>Blog Entry 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor.</p>

    <div class="date">March 23, 2013</div>
    <div class="read-more"><a href="blog-detail.php" title="read more on this title">Read more</a></div>
</div>

<div class="promo">
    Promo
</div>

html css less twitter-bootstrap-3
person Brad    schedule 08.08.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я думаю, что bootstrap 3 использует отступы для разделения столбцов вместо полей. Ваша граница обтекает весь элемент, включая отступы. Вам может потребоваться указать свои собственные правила полей для разделения столбцов вместо заполнения, чтобы получить окаймленные блоки с разделением между ними.

person jtlowe    schedule 08.08.2013

arrow_upward
0
arrow_downward

@jtlowe находится прямо в https://stackoverflow.com/a/18127896/1596547 о заполнении. Но применение правил полей к вашим столбцам нарушит сетку (из-за того, что поля складываются с шириной).

Используйте дополнительный контейнер, как здесь: нужно расстояние между div, используя twitter bootstrap v3 (дубликат??)

html

<div class="promo">
    <div class="rounded-box">Promo</div>
</div>

меньше

.rounded-box(@border; @radius; @bg-color: transparent; @margin: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   margin: @margin;
   height:@rounded-box-height;
}

ПРИМЕЧАНИЕ: примените здесь высоту (@rounded-box-height) и замените отступы на поля.

person Bass Jobsen    schedule 12.09.2013