如何仅使用bootstrap flex垂直对齐和水平拉伸多个输入？

Question

作为一项学习练习，我只想使用Bootstrap Flex（或CSS3 flexbox）对输入字段进行垂直左对齐和水平拉伸。我知道Bootstrap Grid（和CSS3 grid layout），但是我不想使用它。

这是代码（也在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>
    

看起来像这样

---

---

我在项目div上尝试过align-self- *，但是没有任何运气。我还尝试过将类直接放在输入上。

然后我删除了标签和输入周围的div。现在它们可以水平拉伸，但仍不能垂直对齐。

现在结果看起来像这样

---

---

作为一个子问题，我将每个输入（和每个标签）包装在div中。是正确/良好/推荐（就Html / CSS在技术上的工作方式而言）还是过大？

Answer 1

所以我不能仅使用Bootstrap Flex来解决它，但是我在CSS3 Flexbox的帮助下部分完成了它。

我基本上删除了.flex-fill（Bootstrap将其设置为具有我们不需要的flex: auto 1 1），并改用了flex-basis: <size>属性。然后我使用justify-content-between将输入对齐到右侧。

Codepen

代码：

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变大并降低性能。

Answer 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>

只是删除了一些类！