作为一项学习练习,我只想使用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>
    





看起来像这样



html - 如何仅使用bootstrap flex垂直对齐和水平拉伸(stretch)多个输入?-LMLPHP



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

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

现在结果看起来像这样



html - 如何仅使用bootstrap flex垂直对齐和水平拉伸(stretch)多个输入?-LMLPHP



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

最佳答案

因此,我不能仅使用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变大并降低性能。

10-05 20:43
查看更多