如何在带有 flexbox 的 Bootstrap 4 中使用嵌套网格

Question

我正在使用带有 flexbox 的 Bootstrap 4 CSS，但我遇到了嵌套网格问题。嵌套网格在没有 flexbox 的 Bootstrap 4 中按预期工作，但是当使用 flexbox 时，元素堆叠而不是水平排列。这段代码：

<main class="container-fluid">
    <form novalidate>
        <div class="row">
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group">
                    <label>Single input</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon">1</span>
                        <input type="text" class="form-control" placeholder="100%">
                    </div>
                </fieldset>
            </div>
            <div class="col-md-6 col-xs-12">
                <fieldset class="form-group row">
                    <div class="col-md-6">
                        <label>Double Input 1</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                    <div class="col-md-6">
                        <label>Double Input 2</label>
                        <input type="text" class="form-control" placeholder="50%">
                    </div>
                </fieldset>
            </div>
        </div>
    </form>
</main>

创建this view。

编辑： 奇怪的是，如果我将第二列中的字段集更改为 div，则布局按预期工作。但是，除了元素的计算高度之外，我在字段集和 div 之间找不到任何有意义的 css 差异。破坏布局的 fieldset 是怎么回事？

很遗憾，我无法创建 jsfiddle，因为通过 cdn 可用的 Bootstrap 4 css 版本没有启用 flexbox。

Answer 1

您的内部下一个.row 位于<fieldset> 标记中。

在 TWBS 中，字段集的边距设置为 0，row 类的左/右设置为 -15px。您使用的组合中断布局和列因此换行。

尝试嵌套在单独的.row <div> 中，像这样。

<!-- does not work -->
<fieldset class="form-group row">
  ...
</fieldset>


<!-- better solution -->
<div class="row">
  <fieldset class="form-group">
    ..
  </fieldset>
</div>