我想在文本区域的右侧添加2个按钮,一个使用引导程序在其顶部,另一个在其下方,并自动对齐它们,是否可以仅使用原始的引导程序类来实现?
与https://getbootstrap.com/docs/4.3/components/input-group/所示的示例,我可以编写一些类似的代码:
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append" id="button-addon4">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
其中显示: 但是我想要这样: 并自动对齐它们(也许可以通过textarea auto的大小来调整它们的大小?)所以有什么方法可以仅使用orignal bootstrap类来做到这一点?
d-flex flex-column
在#button-addon4
div flex: 1 0 auto;
上使用,也可以在按钮上应用,以在增加textarea的高度时扩展按钮的高度。
.input-group-text,
.btn-outline-secondary {
flex: 1 0 auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<div class="d-flex">
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="d-flex flex-column" id="button-addon4">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="input-group mt-4">
<textarea class="form-control" aria-label="With textarea"></textarea>
<div class="input-group-append d-flex flex-column">
<span class="input-group-text">Button 1</span>
<span class="input-group-text">Button 2</span>
</div>
</div>
</div>