Как выровнять по вертикали и растянуть несколько входов по горизонтали, используя только bootstrap flex?

В качестве учебного упражнения я хотел бы использовать только Bootstrap Flex (или Флексбокс CSS3) для вертикального выравнивания по левому краю и горизонтального растяжения полей ввода. Я знаю о Bootstrap Grid (и Макет сетки CSS3), но не хочу его использовать.

Вот код (тоже на codepen.io)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field ABC 1</label></div>
		  <div class="flex-fill"><input   type="text" /></div>
      </div>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field Long DEF 123 </label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
      <div class="d-flex flex-row">
		  <div class="flex-fill"><label>Field3</label></div>
		  <div class="flex-fill align-self-stretch"><input type="text" /></div>
      </div>
    </div>
    

И это выглядит примерно так


enter image description here


Я пробовал align-self-* для элементов div, но безуспешно. Я также попытался поместить класс прямо на вход.

Затем я удалил div вокруг меток и входов. Теперь они растягиваются по горизонтали, но по-прежнему не выравниваются по вертикали.

И теперь результат выглядит так


enter image description here


В качестве подвопроса я обернул каждый ввод (и каждую метку) в div. Это правильно/хорошо/рекомендуется (с точки зрения того, как технически должны работать Html/CSS) или это излишество?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
737
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

.flex-c input{
width:80%;
  height:50px;
}
.flex-c label{
width:18%}
.flex-c{
  align-items:center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row flex-c">
		  <label>Field ABC 1</label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
        <label>Field Long DEF 123 </label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row flex-c">
		  <label>Field3</label>
		  <input type="text" />
      </div>
    </div>

просто удалил некоторые классы!

Ответ принят как подходящий

Так что я не мог решить это, используя только Bootstrap Flex, но я сделал это частично с помощью CSS3 Flexbox.

Я в основном удалил .flex-fill (Bootstrap устанавливает для него flex: auto 1 1, чего мы не хотим) и вместо этого использовал свойство flex-basis: <size>. И я использовал justify-content-between, чтобы выровнять ввод по правому краю.

Кодепен

Код:

input {
  flex-basis: 50%; /* default auto */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="d-flex flex-wrap flex-column">
      <div class="d-flex flex-row justify-content-between">
		  <label>Field ABC 1</label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
		  <label>Field Long DEF 123 </label>
		  <input type="text" />
      </div>
      <div class="d-flex flex-row justify-content-between">
		  <label>Field3 </label>
		  <input type="text" />
      </div>
    </div>

И о вашем втором вопросе: избегайте ненужных div, они увеличивают ваш DOM и снижают производительность.

Другие вопросы по теме