Несколько строк внутри строки с Bootstrap 4

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

<body>
    <div class="container-fluid">
        <div class="row">
            The first row goes here
        </div>
        <div class="row">
            The second row goes here
        </div>
        <div class="row">
            The third row goes here
        </div>
    </div>
</body>

Если бы я хотел создать строку внутри строки, как бы я это сделал? Это то, чего я пытаюсь достичь:

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="row text-center">
                <h1>Some title</h1>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    Grid perhaps
                </div>
                <div class="col-md-4">
                    More grid
                </div>
                <div class="col-md-2"></div>
            </div>
        </div>
    </div>
</body>

Итак, в основном я хочу поместить заголовок в одну строку и несколько сеток в другую строку. Сложная часть здесь заключается в том, что я хочу разместить несколько столбцов шириной 4 столбца посередине, а затем иметь «2 столбца заполнения» слева и справа.

Мой вопрос может звучать как другие, но он уникален из-за заполнения. Как правильно сделать этот макет?


html css twitter-bootstrap twitter-bootstrap-4
person MortenMoulder    schedule 02.03.2017    source источник
comment
Возможный дубликат Bootstrap: несколько вложенных строк в строке?   -  person Mattonit    schedule 02.03.2017
comment
@Mattonit Не работает с тем, как я это делаю.   -  person MortenMoulder    schedule 02.03.2017
comment
Так что же не так с кодом, который у вас сейчас есть?   -  person Luud van Keulen    schedule 02.03.2017
comment
Почему вы пытаетесь вложить строки? Наверняка у вас действительно просто две строки, одна за другой.   -  person Quentin    schedule 02.03.2017
comment
Вы можете использовать класс offset-md-2.   -  person Luud van Keulen    schedule 02.03.2017
comment
@Quentin Я делаю макет страницы во всю ширину. Было бы разумно, если бы каждая строка имела ширину 100%. Если бы я хотел, чтобы в каждой строке было две строки, как бы я это сделал? Это мой вопрос.   -  person MortenMoulder    schedule 02.03.2017
comment
@MortenMoulder — Было бы логично, если бы ширина каждой строки составляла 100% — да. Это скорее точка ряда.   -  person Quentin    schedule 02.03.2017
comment
@LuudvanKeulen Что не так? Вы говорите мне: jsfiddle.net/L1uq1mxn   -  person MortenMoulder    schedule 02.03.2017
comment
@MortenMoulder — Если бы я хотел, чтобы в каждой строке было две строки, как бы я это сделал? — Зачем тебе это? Нет смысла так делать.   -  person Quentin    schedule 02.03.2017
comment
@Quentin Тогда ты, конечно же, понимаешь, что я имею в виду и что не так.   -  person MortenMoulder    schedule 02.03.2017
comment
@MortenMoulder — Нет! Я не понимаю, что вы имеете в виду. Как я уже сказал, это не имеет смысла.   -  person Quentin    schedule 02.03.2017
comment
@Quentin Две строки друг за другом не имеют смысла? Тогда какой смысл? Как бы вы сделали заголовок и, возможно, несколько строк под ним с информацией? столбец-*-12? Да, это в основном ряд.   -  person MortenMoulder    schedule 02.03.2017
comment
@MortenMoulder — Строки друг за другом имеют смысл. <row></row><row></row><row></row>. Ряды внутри друг друга не содержат. <row><row></row><row></row></row>   -  person Quentin    schedule 02.03.2017
comment
@Quentin i.imgur.com/IGwQqoh.png - Если это не так, как вы должны чтобы сделать это, пожалуйста, просветите меня.   -  person MortenMoulder    schedule 02.03.2017
comment
@MortenMoulder — это последовательные строки, а не вложенные строки.   -  person Quentin    schedule 02.03.2017
comment
@Quentin Если предположить, что есть 10 таких, как мой снимок экрана друг под другом, вы бы считали это строкой или контейнером? Сложите 10 моих скриншотов друг на друга. Если это не скандал, я должен прекратить это.   -  person MortenMoulder    schedule 02.03.2017
comment
Это не ряд. Это набор строк. Для набора строк нет специального класса Bootstrap. Возможно, вы используете простой div. Возможно раздел. Возможно, вы вообще не утруждаете себя добавлением какой-либо дополнительной разметки: в этом нет особого смысла, если вы не планируете стилизовать ее или получать к ней доступ с помощью JS.   -  person Quentin    schedule 02.03.2017
comment
Это обсуждение было действительно полезным... Я пытался сделать то же самое, но по другим причинам. Я реализовывал вложенные строки, когда сворачивал их подмножество. Первоначально содержимое строки collapse было одной строкой, но затем оно стало многострочным, следовательно, строки внутри строк... но старый добрый <div /> для хранения класса коллапса был всем, что мне действительно было нужно. <div class="row">...</div><div class="collapse"><div class="row">...</div><div class="row">...</div></div><div class="row">...</div>   -  person Morvael    schedule 07.03.2018

Ответы (2)


arrow_upward
15
arrow_downward

Bootstrap имеет интеллектуальную (но деликатную) систему желобов, обеспечивающую «естественный» (margins + paddings) контент на всех устройствах 1.

Эта система основана на двух простых предположениях:

  • столбцы являются непосредственными дочерними элементами .rows 2
  • содержимое размещается внутри столбцов

Вот почему, если вы хотите поместить .row внутри другого .row (для дальнейшего разделения одного из ваших столбцов), вам придется использовать эту разметку:

<div class="row">
  <div class="col-12">
     <div class="row">
        <div class="col-md-4 offset-md-2">
           Grid perhaps
        </div>
        <div class="col-md-4">
           More grid
        </div>
     </div>
  </div>
</div>

Вышеизложенное само по себе не имеет большого смысла (вы можете просто использовать разметку дочерней строки, и вы получите тот же результат). Но это полезно, когда вы хотите сместить (или ограничить) всю область макета, например:

<div class="row">
  <div class="col-md-8 offset-md-2 col-sm-10 offset-sm-1 col offset-0">
     <div class="row">
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
        <div class="col-md-6">Grid</div>
        <div class="col-md-6">More grid</div>
     </div>
  </div>
</div>

См. эту скрипту для живого примера.

1 Чтобы избавиться от канавок Bootstrap (в версии 4), необходимо применить класс no-gutters к классу .row.

2 Это "общий принцип", а не "строгое правило". Другие элементы разрешены (и даже рекомендуются) в качестве прямых дочерних элементов .rows (например, column перерывы). С другой стороны, другие элементы расширяются от .rows (например, .form-rows), наследуя таким образом систему желобов и являясь допустимыми родительскими столбцами.

person tao    schedule 02.03.2017
comment
jsfiddle.net/L1uq1mxn/2 - это не дает мне желаемого результата. - person MortenMoulder; 02.03.2017
comment
Конечно, нет. Вы забыли упомянуть, что используете Bootstra 4, который все еще находится в версии alpha! Try this - person tao; 02.03.2017
comment
Буквально в заголовке и в теге написано Bootstrap 4... Упоминается дважды. - person MortenMoulder; 02.03.2017
comment
Хорошо, мой плохой. Я пропустил этот момент. Обновил мой ответ. - person tao; 02.03.2017
comment
Так что с этим делать? Он добавляет некоторые отступы к первому столбцу, затем второй столбец помещается сразу после него, а затем сзади остаются 2 столбца, в которых ничего нет? - person MortenMoulder; 02.03.2017
comment
@MortenMoulder Вообще говоря, наличие пустых контейнеров только для выравнивания считается плохой практикой. Хотя 20 лет назад было нормально. - person tao; 02.03.2017
comment
Это правда, и я с этим согласен. Давайте представим, что есть n столбцов, и я хочу, чтобы первые столбцы каждой строки имели смещение 2, а последнее имело смещение 2 вправо, как мне сделать что-то подобное наилучшим образом? Должен ли я проверить, есть ли index % 4 == 0, а затем добавить что-то, или есть умный способ, которым Bootstrap может мне помочь? - person MortenMoulder; 02.03.2017
comment
@MortenMoulder Внутри row вы создаете один единственный столбец: col-8 offset-2. В нем вы ставите row. В этом row вы помещаете столько col-6, сколько хотите. Нет смысла добавлять отступы к дочерним элементам на основе сложных вычислений реакции вместо того, чтобы добавлять их в один контейнер. - person tao; 02.03.2017
comment
Я полагаю, что это хороший способ сделать это, да! Большое спасибо за помощь. - person MortenMoulder; 02.03.2017
comment
@MortenMoulder Вот пример: jsfiddle.net/L1uq1mxn/5 Пожалуйста. Удачного кодирования! :: }‹(((*› ::) - person tao; 02.03.2017

arrow_upward
6
arrow_downward

  • .row не должен быть непосредственным потомком другого .row
  • .col* не должен быть непосредственным потомком другого .col*

Из документов Bootstrap:

«Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк».

Я не понимаю, почему вы думаете, что вам нужна строка в строке, и что плохого в том, чтобы просто использовать ваш макет без вложенного row. Вы понимаете, что col-12 - это ширина полной строки?

<div class="container-fluid">
    <div class="row">
        <div class="col-12 text-center">
            <h1>Some title</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2">

        </div>
        <div class="col-md-4">
            Grid perhaps
        </div>
        <div class="col-md-4">
            More grid
        </div>
        <div class="col-md-2">

        </div>
    </div>
</div>

http://www.codeply.com/go/jfrWn4QDf1

Bootstrap 4, применяется то же правило:

«Строки — это оболочки для столбцов. Каждый столбец имеет горизонтальное заполнение (называемое желобом) для управления пространством между ними... В сетке содержимое должно быть помещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк» ​​__ Документация по Bootstrap 4.1

Связано: Столбцы должны быть непосредственными дочерними элементами строк?

person Zim    schedule 02.03.2017
comment
Содержимое цитирования должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк. это для начальной загрузки 3, а не 4, не могли бы вы подтвердить, если я ошибаюсь или прав :) - person Hicham Bouchilkhi; 29.05.2018
comment
В обеих версиях одинаково - person Zim; 29.05.2018
comment
Ваш codeply помог мне с проблемой на работе, спасибо! - person Aker666; 05.08.2019