作为一项学习练习,我只想使用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在技术上的工作方式而言)还是过大的?
最佳答案
因此,我不能仅使用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变大并降低性能。