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

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

19 голосов
/ 25 октября 2011

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

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

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

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

Ответы [ 3 ]

6 голосов
/ 14 июня 2012

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

Добавьте класс с именем .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

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

Однако этот подход не будет работать в жидких сетках.

4 голосов
/ 29 мая 2012

По мотивам stackoverflow.com / a / 10779289 

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}
3 голосов
/ 14 декабря 2011

Вы можете переместить ширину в файле .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">

...