嵌套 Bootstrap 容器流体

Question

我正在主容器中构建一个包含各种字段集的 html 页面。每个字段集都包含各种输入字段。我是这样做的：

<form>
  <div class="container-fluid">
    <fieldset>
      <div class="container-fluid">
        <div class="row">
        ...
        </div>
        <div class="row">
        ...
        </div>
      </div>
    </fieldset>

    <fieldset>
      <div class="container-fluid">
        <div class="row">
        ...
        </div>
        <div class="row">
        ...
        </div>
      </div>
    </fieldset>
  </div>
</form>

我认为嵌套 container-fluid 是不正确的，但我尝试这样做以获得正确的外部和内部 div 填充。 我还尝试从外部 div 中删除 container-fluid 类并设置填充。结果也是正确的，但我不确定页面是否仍然响应。 有没有办法避免嵌套容器流体类？或者我的解决方案是可以接受的？ 谢谢...

Answer 1

1) 您应该始终避免将 Bootstrap 容器嵌套在其他容器中。 虽然在技术上可以嵌套它们，但我想不出一个这样做是个好主意的情况。因此，请始终避免容器嵌套。

2) 为使 Bootstrap 网格为您正常工作，您始终需要将所有正常内容放入一个或多个列。 然后列/列进入行。 容器中有一行。

所以，container > row > column 是您一直想要维护的“三位一体”。 如果您错过了这 3 个组件中的一个，您将遇到问题，因为这 3 个组件旨在协同工作。

在您的代码中，您没有使用列，这就是您缺少填充的原因。在行内添加列/列，Bootstrap 将“自动”为您提供所需的填充，并且所有内容都将 100% 响应。

3) 在使用 container-fluid 之前，一定要三思而后行。 因为 container-fluid 会使内容跨越整个屏幕宽度，而拥有宽 4K 显示器的用户会因此而讨厌你。

以下代码是一个运行良好的示例：

<form>
    <div class="container">
        <div class="row">
            <fieldset>
                <div class="col">
                    content goes here...
                </div>                
            </fieldset>
        </div>
        <div class="row">
            <fieldset>
                <div class="col">
                    content goes here...
                </div>                
            </fieldset>
        </div>
    </div>
</form>