css - 堆“行”类 Bootstrap4 中的元素

Question

我正在尝试找到一种在行类中堆叠元素的方法。

在此处查看 JS Fiddle：https ://jsfiddle.net/jLhvmq24/2/

我需要在输入框下方显示小标签“Enter Business Email”

<div class="row">
  <div class="input-group col-10">
    <input type="text" class="form-control" placeholder="email address">
    <small class="text-muted">Enter Business Email.</small>
  </div>
  <div class="col-2">
    <button class="btn btn-light">Subscribe</button>
  </div>
</div> 

标签： csstwitter-bootstrapbootstrap-4flexbox

Answer 1

1. 使用最外层的 parent( row) 来flex row（默认显示行）。
2. 由于您需要将文本input添加flex-direction:column;到.input-group类中。

小提琴

.row {
  display: flex;
}

.input-group {
  display: flex;
  flex-direction: column;
}

<div class="row">
  <div class="input-group col-10 mb-4">
    <input type="text" class="form-control" placeholder="email address">
    <small class="text-muted">Enter Business Email.</small>
  </div>
  <div class="col-2">
    <button class="btn btn-light" type="button">Subscribe</button>
  </div>
</div>