Поддерживается ли дополнение в фреймворке Twitter Bootstrap?

У меня проблемы с пониманием структуры Twittter Bootstrap. Позволяет ли это для базового заполнения вокруг контейнеров?

Кажется, по умолчанию осталось поле в 20px, но нет отступов. Кому-нибудь здесь удалось решить эту проблему?

http://twitter.github.com/bootstrap/

Это прекрасно работает, если ваш фон белый, но в тот момент, когда я помещаю цвет позади контейнера, я не получаю отступов, и если я добавляю отступы, мой макет нарушается. Я делаю что-то неправильно?

Источник

3 ответа

Решение

Вдохновлен /questions/37888141/twitter-bootstrap-granitsyi/37888144#37888144

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}
Источник

Использование вышеприведенного подхода и его применение для заполнения также будет работать.

Добавьте класс.is-padded к тому диапазону, который вы хотите добавить (в данном случае span4)

<!-- Example row of columns -->
  <div class="row">
    <div class="span4 is-padded">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

Затем создайте CSS (или менее), который уменьшает ширину диапазона с помощью примененного отступа, например:

/* CSS example */
.span4.is-padded {
    width: 280px; /* 300 - (10x2) */
    padding: 10px;
    background: #CCC; /* just so you can see it */
}

/* Less example */
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}

Это можно легко повторить для остальной части сетки

.is-padded {
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}
.span1.is-padded {
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;
}
.span2.is-padded {
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;
}
.span3.is-padded {
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;
}
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
}
... etc

Точки останова в адаптивных сетках можно легко переопределить, используя медиазапросы.

Этот подход не будет работать в жидкостных сетях, хотя.

Источник

Вы можете переопределить ширину сайта в файле.less // Грид-система и структура страницы

то есть, если вы хотите добавить 20px к каждой стороне 940px (20px является gridGutterWidth по умолчанию), закомментируйте:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

и писать:

@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

отменить поле слева: -20px с правилом CSS:

.row {margin-left: 0;}

Но если вы используете вложенные строки, вам нужно будет добавить класс только к тем строкам, которые вы хотите сделать отступом. Создать правило:

.indent {margin-left: 0;}

Затем в <div class="row"> добавить в класс <div class="row indent">

Источник
Другие вопросы по тегам