0

我正在主容器中构建一个包含各种字段集的 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>

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

4

1 回答 1

1

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

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

因此，容器 > 行 > 列是您始终想要维护的“三位一体”。如果您错过了这 3 个组件中的一个，您将遇到问题，因为这 3 个组件旨在协同工作。

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

3）在使用容器流体之前总是三思而后行（或三思而后行）。因为 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>

于 2018-01-05T18:52:28.483 回答