Bootstrap 4: исправить нижнюю часть содержимого внутри контейнера

Question

У меня есть приложение, обернутое вокруг <div class="container">, в котором у меня есть редактор и несколько кнопок, которые я всегда хочу отображать внизу, примерно так:

<div class="container>
  // some content....


  // this should be shown always at the bottom!
  <div id="bottom" class="submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>

I попытались изменить свойства min-height и height для html, body и container на 100% и добавили важное значение в эти правила, но это не заставляет мой контейнер div больше растягиваться вниз. Когда я использую класс «fixed-bottom» bootstrap, div #bottom растягивается горизонтально по границам контейнера, что делает макет совершенно некрасивым.

есть предложения? :)

Answer 1

Оберните вашу «форму отправки» другим контейнером или используйте col-* для позиционирования.

Например:

<div class="container>
  // some content....


  // this should be shown always at the bottom!
  <div id="bottom" class="container fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

Манипулируйте размером вашего div с помощью col-* class (bootstrap сетка содержит 12 столбцов, поэтому ниже div будет охватывать 4 столбца экрана):

<div class="container>
  // some content....


  // this should be shown always at the bottom!
  <div id="bottom" class="col-4 fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

После этого эта форма будет выровнена по левой стороне экрана.

Используйте d-flex для размещения столбца bootstrap:

  <div class="container>
      // some content....


      // this should be shown always at the bottom!
     <div class="d-flex justify-content-center fixed-bottom">
        <div id="bottom" class="col-4 submit-form">
         <div id="editor"></div>
        <div class="btn btn-grp" ></div>
  </div>
     </div>
   </div>

Если вы хотите создать адаптивный веб-сайт, вы должны прочитать кое-что о системе bootstrap сетки и использовать col-md-*, col-sm-* et c. вместо col-*:

https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

Если вы используете BS4, то есть множество классов, предоставляемых BS, используйте их для достижения ваших результатов.

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

ПРИМЕЧАНИЕ : Если вы не хотите использовать row, на всякий случай используйте класс d-flex в контейнере, и остальные останутся такими же.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
<div class="container">
<div class="row" style="height: 200px;">
<div id="bottom" class="submit-form align-self-end">
    <div id="editor"></div>
    <div class="btn btn-grp" >Button</div>
  </div>
  </div>
  </div>