Блог

Главная - Вопросы по программированию - Равномерное вертикальное растягивание содержимого одного столбца в начальной загрузке

Равномерное вертикальное растягивание содержимого одного столбца в начальной загрузке

#javascript #html #bootstrap-4

#javascript #HTML #bootstrap-4

Вопрос:

Я пытаюсь заставить несколько кнопок растягиваться по вертикали до размера контейнера, но я не могу понять, как я это делал раньше. Я перепробовал все возможности на https://getbootstrap.com/docs/4.0/utilities/flex / (например, align-items-stretch, align-self-stretch, align-content-stretch , но, похоже, ни один из них ничего не делает для вертикального растяжения одного столбца, по крайней мере, как я их реализовал. Как это делается? Спасибо!

(https://codepen.io/jasonws/pen/poyYMpz )

 <div class="container mt-3">
  <div class="d-flex align-content-stretch border" style="height:150px; width:200px; flex-direction: column">
    <button type="button" class="btn btn-primary my-1">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1">Flex item 3</button>
  </div>
</div>

Ответ №1:

Просто удалите другие вещи из вашего класса d-flex

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
  <div class="border" style="display: grid">
    <button type="button" class="btn btn-primary my-1 m-2">Flex item 1</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 2</button>
    <button type="button" class="btn btn-primary my-1 m-2 ">Flex item 3</button>
  </div>
</div>

Комментарии:

1. Спасибо за ваше предложение, но я не понимаю, как это растягивает кнопки по вертикали в одном столбце до высоты контейнера.

2. не могли бы вы сделать это более понятным, чтобы я мог дать какие-либо предложения

3. вы хотите, чтобы ваша кнопка была в том же выравнивании???

4. Спасибо за ваш вопрос! Вы видите, что высота контейнера больше высоты кнопок, как указано границей? Я бы хотел, чтобы высота каждой из кнопок увеличивалась на ту же небольшую величину, чтобы они полностью заполняли контейнер. Делает ли это необходимость более понятной?

5. Большое вам спасибо! Это именно то, что я ищу. Я удивлен, что ответ был таким простым.