Bootstrap Grid 系统 - 最佳实践 - 边距 [关闭]

Question

我有以下布局。我不能使用导航栏，所以我使用了 Grid 系统并为其设置了背景。

如何使此布局具有响应性？如何在我的container（例如搜索框）内的divs 之间留下空格？ Bootstrap 框架中是否有任何帮助类可以让我实现这一目标？

Answer 1

您可以为容器或行内的 <div> 标签添加边距，但 Bootstrap 是为响应式 Web 应用程序设计的。因此，除非您想出一种方法来定义您的边距，而不是按字面量，而是根据屏幕尺寸，否则它不会像您希望的那样响应。另外，请避免使用 container、row 或 col 类更改某些内容的边距

我的建议。在 div 和 col-lg-7 或任何可能的数字上，包括另一行，以便您可以按照您需要的任何方式组织布局。如果你想在元素之间留出一定的空间，根据你的需要使用'col-lg-offset-x'； 'x' 是你想要的元素之间的空格数量。这也等于 12。

我举个例子

<div class="row">
  <div class="col-lg-2">
    <!--Whatever you want to include here-->
  </div>

  <div class="col-lg-3">
    <!--Whatever you want to include here-->
  </div>

  <div class="col-lg-7">
    <div class="row">
      <div class="col-lg-offset-2 col-lg-4">
        <!--Whatever you want to include here-->
      </div>

      <div class="col-lg-offset-1 col-lg-5">
        <!--Whatever you want to include here-->
      </div>
    </div>        
  </div>
</div>

您需要添加col-md-x、col-sm-x 和col-xs-x 类以满足您的需求。 我希望它有所帮助。