如何使用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>

创建此视图 。

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

不幸的是我无法创建一个jsfiddle，因为通过cdn提供的Bootstrap 4 css版本不支持flexbox。

Answer 1

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

在TWBS字段集中，其边距设置为0， 行类设置为左/右至-15px。 您正在使用的组合会破坏布局，因此列会换行。

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

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


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