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>

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

Answer 1

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

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

所以，容器＆gt;行＆gt;专栏是＆＃34;圣三一＆＃34;你总想保持。如果您错过了这三个组件中的一个，那么您将遇到问题，因为这3个组件旨在协同工作。

在您的代码中，您没有使用列是您缺少填充的原因。在行内添加列/列，Bootstrap将自动地＃34;为您提供所需的填充物，一切都将100％响应。

3）在使用容器液之前，请务必三思而后行（或3次）。因为容器流体将使内容跨越整个屏幕宽度，而具有宽4K监视器的用户将会讨厌你。

以下代码是一个非常有效的示例：

＆＃13;

<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>

＆＃13;

嵌套Bootstrap容器 - 流体

1 个答案: