Bootstrap 4 - выровнять элемент по дну его контейнера - PullRequest
Новая
       30

Bootstrap 4 - выровнять элемент по дну его контейнера

0 голосов
/ 03 сентября 2018

Я пытался найти ответ на этот вопрос, но не повезло, также сам попробовал несколько вещей У меня есть два столбца внутри строки, и я хотел бы выровнять по вертикали нижний элемент второго столбца (группа из трех кнопок) по низу контейнера строк, а именно # control-panel.

В настоящее время второй столбец выравнивается по центру (по вертикали), поэтому три кнопки не прикреплены к нижней части контейнера.

Также я прилагаю изображение, чтобы его было легче увидеть Attached image

 <div id="control-panel">
    <div class="container">
      <div class="row">

        <div class="col-lg-3">
          <div class="display-4 p-3"><h2>Step 3:</h2></div>
          <p>Add a contact form, if you like, so people can contact you!</p>
          <a href="" class="btn btn-primary">Show contact form</a>
        </div>
        <div class="col-lg-3 d-flex flex-column">
          <div class=" p-3"><h2>Step 4:</h2></div>
            <p>Pick a style for your website</p>
            <div class="btn-group align-self-bottom">
              <button class="btn btn-primary" type="button">Style 1</button>
              <button class="btn btn-secondary" type="button">Style 2</button>
              <button class="btn btn-primary" type="button">Style 3</button>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS для контейнера просто: 

#control-panel {
height: 200px
}

Я пытался использовать «align-self-bottom» или «align-self-end» для класса «btn-group», который я хочу выровнять по низу, но он перемещает его горизонтально, а не вертикально, как я хотел .

Большое спасибо за любые предложения

1 Ответ

0 голосов
/ 06 сентября 2018

Проверьте этот StackBlitz: Пример FlexBox

enter image description here

HTML-файл: 

<div class="main-container">
  <div class="first-column">

  </div>

  <div class="second-column">
    <div class="buttons">

      <button>Button1</button>
      <button>Button2</button>
    </div>
  </div>
</div>

Файл CSS: 

.main-container {
  border-color: red;;
  border-style: solid;
  height: 100px;

  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.first-column {
  border-color: blue;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.second-column {
  border-color: green;;
  border-style: solid;
  height: 100px;
  width: 100px;
}

.buttons {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  height: 100px;
}

Я использую здесь flexbox, чтобы создать основной контейнер (красный) и два столбца внутри (синий и зеленый), затем во втором столбце я создаю две кнопки и выравниваю их по нижней части их контейнера.

...