1

我正在使用带有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，则布局按预期工作。但是，除了元素的计算高度之外，我在字段集和 div 之间找不到任何有意义的 css 差异。打破布局的字段集是什么？

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

4

1 回答 1

0

你的内在下一个.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>
于 2016-07-03T00:22:08.340 回答