Bootstrap网格系统 - 最佳实践 - 利润

Question

我有以下布局。我不能使用导航栏，所以我使用网格系统并给它背景。

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

Answer 1

您可以为容器或行内的<div>标记添加边距，但Bootstrap是专为响应式网络应用而设计的。因此，除非你想出一种方法来定义你的边缘而不是字面意思，但是根据屏幕尺寸，它不会像你希望的那样具有反应性。此外，请避免使用课程container，row或col

更改某些内容的边距

我的推荐。在带有div的{​​{1}}或任何可能的数字上，包含另一行，以便您可以以任何方式组织布局。如果你想在元素之间留出一定的空间，请使用＆＃39; col-lg-offset-x＆＃39;根据您的需要;用＆＃39; x＆＃39;是你想要的元素之间的空间量。这总计会达到12个。

让我举个例子

col-lg-7

您需要添加<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类以满足您的需求。 我希望它有所帮助。