Можно ли поставить «row» -s внутри «d-flex» в Bootstrap 4?

-1

(Там же подобный вопрос here, но я слишком много нуба еще перевести это на Bootstrap)Можно ли поставить «row» -s внутри «d-flex» в Bootstrap 4?

То, что я хочу, чтобы иметь область на странице между «головой» и «сноской» (назовём это «тело»), который может иметь

некоторые фиксированный участок, как BS4 «строка», поставить на вершине,
некоторого переменного содержание, состоящие из нескольких BS «строки», И выровнен по центру вертикально на середине того, что осталось от тела (или тела сам)

Это может быть сделано в реагирующей манере, и без JS (используя только Bootstrap 4 CSS)?

Я пробовал некоторые вещи:

<body> 
    <div id="root" class="container"> 
    <div style="height: 100%;"> 
     <div><h1>HEADER</h1></div><hr> 
     <div style="min-height: 60%;"> 
     <div class="h100"> 
      <div>some badge</div><br> 
      <div> 
      <div class="row justify-content-between"> 
       <div class="col-3">Item #2</div> 
       <div class="col-3 text-right"> 
       <div>some stats</div> 
       </div> 
      </div> 
      <div class=""> 
       <div class="row justify-content-center"> 
       <div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div> 
       </div> 
       <div class="row justify-content-center"> 
       <div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div> 
       <div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div> 
       </div> 
      </div> 
     </div> 
     </div> 
     </div><hr> 
     <div class="footer">FOOTER</div> 
    </div> 
    </div> 
    </body>

(https://jsfiddle.net/f93mhdbr/), но до тех пор, как я добавить «d-флекс» на «тело» DIV, или любой из его детей, все предыдущие «строка»/«col» -разделение превращается в ужасный беспорядок! (см. https://jsfiddle.net/f93mhdbr/2/)

Я подозреваю, что это связано с самим Bootstrap, используя Flexbox для столбцов и строк, , но, возможно, любое решение существует?

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

UPDATE: добавлены ссылки на то, что я пытался воспроизвести

источник

2017-01-19 62mkv

Опубликовать минимальный фрагмент кода макета, который вы ищете, и мы постараемся сделать его работу – LGSon

@LGSon Я попытался это сделать. – 62mkv

Для этого вам необходимо использовать flex property. Используя здесь flex-grow, ваш элемент переменной будет расти и заполнить оставшуюся высоту своего контейнера, если таковой имеется. Затем остается только установить align-items-center на элемент, чтобы выровнять его по оси x.

Here is the Fiddle

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

Вы можете установить любую фиксированную высоту для header, footer и content-top. Высота content и content-remaining будет адаптироваться ответственно, потому что у них есть свойство flex-grow: 1, установленное на них. Here's an example.

Чтобы объяснить далее, поскольку контейнер wrap имеет min-height: 100-vh, то content элемента будет расти, чтобы заполнить весь видовых по отношению к остальной части гибких элементов внутри wrap контейнера. Та же логика относится к content-remaining, единственная разница в том, что ее родителем является элемент content, а не контейнер wrap.

Как и в прошлом, я добавил исправление IE для свойства min-height на гибких элементах. It's a known bug, и быстрое и надежное решение состоит в том, чтобы обернуть его в отдельный гибкий контейнер.

Надеемся, это было вам полезно, если у вас остались вопросы, прокомментируйте этот ответ.

источник

2017-01-23 21:41:47 Cooleronie

кажется, что я не сформулировал его достаточно сильно - то, что я пытался достичь, состояло в том, чтобы иметь * несколько рядов BS4, выровненных в целом (вертикально центрированных) внутри контейнера «flex». Однако чем больше я думаю об этом, тем больше кажется очевидным, что это невозможно, потому что сами «строки» основаны на flexbox, и кажется, что вы не можете иметь встроенные flexboxes. Но у меня нет опыта, чтобы точно ответить. И спасибо за усилия! – 62mkv

Можно ли поставить «row» -s внутри «d-flex» в Bootstrap 4?

ответ

Смежные вопросы