Twitter Bootstrap - Полноэкранный фон (изображение)

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

Как вы даете .container (который содержит сетку) цвет фона? Пример:

<div class="container green">
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
    <div class="row">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

.green{
 background:green;
}

Когда я добавляю цвет в контейнер, он станет зеленым, но оставляет левую сторону поля, около 20 пикселей. Как реализовать полноэкранный фон?

Ответ 1

Это поле, которое вы видите, связано с тем, что часть класса .row класса сетки удаляет 20 пикселей слева, чтобы разместить классы span внутри каждой строки; этот класс читается следующим образом:

.row {
    margin-left: -20px;
}

Вы можете обойти это, просто обернув свой .container div другим контейнером цветом фона по вашему выбору, например:

HTML

<div class="green">
    <div class="container">
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
        <div class="row">
            <div class="span6">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

CSS

.green{
    background:green;
}

Ответ 2

Попробуйте

body {
    background-color: green;
}

.container {
    background-color: transparent;
}

Ответ 3

Попробуйте это, его работа для меня, оберните свой код следующим образом.

<div class="rowWrp">
    <div class="row colorBg">
        <div class="span6">
            <p>This is a test</p>
        </div>
    </div>
</div>

CSS it:

.colorBg {
   background:red;
  }

.rowWrp {
  background:red; 
  width:940px; 
  padding-right:20px;
  }

Здесь я предполагаю, что мы используем фиксированный макет.