Подтвердить что ты не робот

Поддерживается ли прокладка в базе данных Twitter Bootstrap?

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

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

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

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

Ответ 1

Вдохновленный fooobar.com/questions/4397/...

.light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}

Ответ 2

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

Добавьте класс с именем .is-padded в span, который вы хотите использовать padd (в данном случае 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

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

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

Ответ 3

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

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

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

и напишите:

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

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

.row {margin-left: 0;}

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

.indent {margin-left: 0;}

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