Как справиться с Bootstrap 3 столбцами нет пробелов?

У меня проблемы с новой сеткой Bootstrap 3. Я хотел бы создать 4 столбца сетки. Итак, здесь мой код:

<div class="row">
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
   <div class="col-lg-4">...</div>
</div>

Моя проблема заключается в отсутствии пробелов между столбцами. Сетка применяет padding-left и padding-right для столбцов, а не margin-left и margin-right.

Когда я удаляю добавку и добавляю маржу, она обрушивается. Как я это исправлю? или Есть ли что-то, что я не мог раскрыть?

Ответ 1

Если вы не можете использовать заполнение по умолчанию для создания пробелов, вам нужно добавить "margin-left" в соответствующие столбцы, а также настроить ширину%.

Например, .col-lg-4 обычно имеет ширину 33%, поэтому вы немного уменьшите ее.

.col-lg-4 {
    margin-left:15px;
    width:31.6%;
}

http://bootply.com/74374

Другим вариантом будет использование контейнера внутри столбцов, а затем заполнение будет работать для создания пробелов.

Ответ 2

для более точной ширины столбца вы можете использовать оператор css3 calc()

.col-lg-4 {
    margin-left:15px;
    width:31.6%; /* non-css3 fallback */
    width: calc( 33.33333333% - 15px ); /* css3 calculation */
}

Ответ 3

Вы должны содержать эту строку в .container DIV. В противном случае Bootstrap понимает, что между столбцами не должно быть пробелов.

Ответ 4

Я разместил здесь здесь, но по-прежнему имеет отношение к исходному вопросу и предоставляет дополнительную информацию о том, как работает этот подход.

У меня были аналогичные проблемы с пространством между столбцами. Корневая проблема заключается в том, что столбцы в bootstrap 3 и 4 используют дополнение вместо поля. Таким образом, цвета фона для двух соседних столбцов касаются друг друга.

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

Это был конечный результат для

Наличие пробела с теневой меткой между столбцами было проблематичным. Нам не требовалось дополнительное пространство между столбцами. Мы просто хотели, чтобы желоба были "прозрачными", поэтому цвет фона сайта появлялся между двумя белыми столбцами.

это разметка для двух столбцов

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

Этот подход требует внутреннего div с отрицательными полями точно так же, как и bootstrap класса row. И этот div, который мы назвали "поднятым блоком", должен быть прямым братом столбца

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

Основным недостатком этого подхода является то, что он требует дополнительной разметки, обертывающей содержимое каждого столбца. Для нас это работает, потому что для достижения желаемого внешнего вида нужны только определенные столбцы.

Надеюсь, что это поможет