Как использовать систему сетки Bootstrap 3 или 4 - 16 и 24

Question

Я разработал шаблон сайта Bootstrap 24 psd grid, но теперь я не уверен, как использовать эти сетки 24 или 16 psd в Bootstrap 3 или 4, потому что Bootstrap предоставляет только 12-сеточную систему сетки. У кого-нибудь есть правильное решение?

Answer 1

Вы можете сделать это, как описано выше - стилизуя sass / less так, как вы ожидали, или вы можете просто вложить столбцы внутри столбцов, например так: click.

<div class="container">

    <div class="row">
        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    1/24
                </div>
                <div class="col-6">
                    2/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    3/24
                </div>
                <div class="col-6">
                    4/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    5/24
                </div>
                <div class="col-6">
                    6/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    7/24
                </div>
                <div class="col-6">
                    8/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    9/24
                </div>
                <div class="col-6">
                    10/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    11/24
                </div>
                <div class="col-6">
                    12/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    13/24
                </div>
                <div class="col-6">
                    14/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    15/24
                </div>
                <div class="col-6">
                    16/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    17/24
                </div>
                <div class="col-6">
                    18/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    19/24
                </div>
                <div class="col-6">
                    20/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    21/24
                </div>
                <div class="col-6">
                    22/24
                </div>
            </div>
        </div>

        <div class="col-1">
            <div class="row">
                <div class="col-6">
                    23/24
                </div>
                <div class="col-6">
                    24/24
                </div>
            </div>
        </div>

    </div>
</div>

Answer 2

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

Но не волнуйтесь, это довольно просто.

1. Следуйте инструкциям из этого ответа - https://stackoverflow.com/a/47251052/1614120 (вам понадобится установленный Node.js)
2. Введите следующий код в name.scss (файл, упомянутый на 5-м шаге):

name.scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Set this value to 16, 24, etc. depending on how many columns you need.
$grid-columns: 24;

@import "bootstrap/scss/grid";

3. Компиляция (шаг 7).

Если вам нужны какие-либо другие компоненты Bootstrap, кроме сетки, см. Шаг 5 инструкции.

Answer 3

Вы можете настроить загрузчик и изменить сетку с 12 в соответствии с вашими 16 или 24 сетками.

просто перейдите по следующей ссылке и настройте загрузчик, а затем загрузите загрузчик.

https://getbootstrap.com/docs/3.3/customize/