8 столбцов в Twitter Bootstrap

Как настроить 8 одинаковых столбцов в последней версии загрузочного буфера Twitter.

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

    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12 col-xs-6">
                    <a href="#"><img src="/image.png" class="img-responsive" alt="..."></a>
                </div>
            </div>
        </div>
    </div>

Ответ 1

<div class="row">
      <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                            1
                </div>
                <div class="col-xs-3">
                            2
                </div>
                <div class="col-xs-3">
                            3
                </div>
                <div class="col-xs-3">
                            4
                </div>
          </div>
    </div> 
    <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                            5   
                </div>
                <div class="col-xs-3">
                            6
                </div>
                <div class="col-xs-3">
                            7
                </div>
                <div class="col-xs-3">
                            8
                </div>
          </div>
    </div>
</div>

Ответ 2

У меня была та же проблема, и я отправил 4 столбца, каждый из которых содержит 2 вложенных столбца.

Ответ 3

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

.col-8{
width: 12.5%;
}

Затем добавьте его в свой html.

<div class="row">
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
<div class="col-8"></div>
</div>

Ответ 4

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

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

Например, текущий принятый ответ здесь правильно указывает, что вы не можете сделать это при загрузке по умолчанию, но следующий ответ в строке подсказывает, что вы в гнезде .col-xs-3 внутри .col-xs-6, и я предполагаю, что многие люди пришедшие сюда используют это, потому что это единственный работоспособный ответ, который вы можете найти на первой странице поиска Google.

Что делать, если я хочу 8 столбцов на контрольной точке lg, а затем 4 столбца на планшетах и 2 столбца на мобильном? Этот ответ не грамотно деградирует. Этот метод будет, и это невероятно легко реализовать.

Сначала добавьте это в свой файл CSS:

.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-8r {
    width: 12.5%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-8r {
        width: 12.5%;
        float: left;
    }
}

Затем добавьте col-*-8r в свои столбцы следующим образом:

<div class="row">
    <div class="col-xs-4 col-sm-3 col-md-8r">
        ...
    </div>
</div>

Теперь у вас есть раскладка в 8 столбцов, которая может работать на всех контрольных точках.

Приятная вещь об этом методе заключается в том, что если вам нужно нечетное количество столбцов, очень просто расширить это. Вы просто делите 100 на сколько угодно столбцов, а затем используйте это число вместо 4 экземпляров width: 12.5%; в приведенном выше коде (очевидно, не забывайте обновлять имена классов до любого числа, которое вы используете).

Например, если вам нужен макет из 7 столбцов, вы должны использовать абсурдно длинный width: 14.28571428571429% вместо этих четырех экземпляров, измените имена классов на .col-*-7r, а затем вы можете отказаться от имени класса в любом месте хотите.

Ответ 5

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

<!-- 8 Column -->
<div class="8-column">
    <!-- Container -->
    <div class="container">
        <!-- Parent row -->
        <div class="row">
            <!-- 1st parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /1st parent column -->
            <!-- 2nd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /2nd parent column -->
            <!-- 3rd parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /3rd parent column -->
            <!-- 4th parent column -->
            <div class="col-md-3">
                <!-- Child row -->
                <div class="row">
                    <!-- 1st Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /1st Child Column -->
                    <!-- 2nd Child Column -->
                    <div class="col-md-6">

                    </div>
                    <!-- /2nd Child Column -->
                </div>
                <!-- Child row -->
            </div>
            <!-- /4th parent column -->
        </div>
        <!-- /Parent row -->
    </div>
    <!-- /Container -->
</div>
<!-- /8 Column -->

Ответ 6

Как сказал BenM выше, Bootstrap использует 12-ти колонную сетку, которая не будет делить чисто на 8 равных столбцов.

Если вам абсолютно требуется 8 столбцов, возможно, стоит проверить this или даже сворачивание собственных.

Ответ 7

Для 8-ти столбцовой сетки вам не нужно настраивать css или html.

Просто создайте или скопируйте это:

<div class="col-md-6">
        <div class="col-md-3">1</div>
        <div class="col-md-3">2</div>
        <div class="col-md-3">3</div>
        <div class="col-md-3">4</div>
    </div>
    
    
    <div class="col-md-6">
        <div class="col-md-3">5</div>
        <div class="col-md-3">6</div>
        <div class="col-md-3">7</div>
        <div class="col-md-3">8</div>
    </div>