Элементы сетки Bootstrip - выровняйте по вертикали большую часть контента сверху, но кнопки снизу - PullRequest
Новая
       17

Элементы сетки Bootstrip - выровняйте по вертикали большую часть контента сверху, но кнопки снизу

0 голосов
/ 15 марта 2020

Я использую сетку Bootstrap 4 для отображения некоторых элементов - заголовки и текстовое содержимое которых я хочу выровнять по вертикали (как они есть). Затем в конце каждого элемента сетки есть <button>, который я хочу выровнять по вертикали снизу, уровень с любым другим <buttons> в других элементах сетки, которые могут оказаться в этом ряду (отзывчиво).

Я видел примеры выравнивания всего по дну, но не смешивания некоторых элементов. Я пробовал предложения, например, другие подобные сообщения

Вот мой HTML: 

<div class="row services">
    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 1</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 2</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
    </div>

    <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
           <h3 class="title">Element 3</h3>
              <p class="description collectiontext">Element description</p>
              <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
    </div>

    ...<div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div> * several

</div>

Любая помощь будет оценена ..

1 Ответ

1 голос
/ 15 марта 2020

Вы можете обернуть <h2> и <p> внутри <div> каждого элемента сетки.
Таким образом, у вас будет два потомка для каждого: <div> и <button>.

Затем вы можете использовать несколько Bootstrap классов для макета flexbox.

Добавьте d-flex, flex-column justify-content-between к каждому элементу сетки.
Эти классы добавят display: flex, flex-direction: column и justify-content: space-between. 

<div class="row services">

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 1</h3>
      <p class="description collectiontext">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid explicabo tempora nostrum, minus distinctio suscipit in? Nemo unde dolor amet perspiciatis blanditiis deleniti, explicabo sed necessitatibus maiores quae culpa libero?</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionA()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 2</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 3</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionB()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box d-flex flex-column justify-content-between" data-aos="fade-up">
    <div>
      <h3 class="title">Element 4</h3>
      <p class="description collectiontext">Element description</p>
    </div>
    <button class="btn btnGetQuote" onclick="javascript:functionC()">Get quote</button>
  </div>

  <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up"></div>

</div>
...