在“行”类 Bootstrap4 中堆叠 <div> 元素答案

【问题标题】：stack <div> elements within a "row" class Bootstrap4在“行”类 Bootstrap4 中堆叠 <div> 元素
【发布时间】：2020-09-15 10:06:55
【问题描述】：

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

在此处查看 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>

【问题讨论】：

在小标签中添加d-block。

标签： css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

使用最外层的父级（row）到flex row（默认显示行）。

由于您需要将文本放在input 下方，因此将flex-direction:column; 添加到.input-group 类中。

fiddle

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

【讨论】：

bs4 有内置类：d-flex 和 flex-column：jsfiddle.net/eu18ka0s ;)
是的，我记得这一点，但那段时间没有按铃！会保留这一点 :) 感谢您告诉我。

【解决方案2】：

你也可以使用网格来解决它。

CSS

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
     "input"
     "small";
}

.input-1 {
  grid-area: input;
}

.small-1 {
  grid-area: small;
}

HTML

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

您可以从 Bootstrap cols 类中删除覆盖它的填充

【讨论】：