如何在Bootstrap中阻止这两个div/navbar重叠

Question

我得到了这个应该被分割的页面。使用Bootstrap，侧边栏有一个of sm-3的侧块，而主要内容有一个of sm-9的正文块。我想如果所有的东西加起来有12列，一切都可以，但是当我在侧栏输入一个nav div的东西时，它似乎忽略了整个网格系统，并向下推动正文块，在侧边栏的前面留下了一个很大的空白空间。

我还是个新手，还没有学会如何正确地使用css。如果有必要的话，我使用了引导CDN。有没有办法让侧边栏和主要内容只使用引导CDN来共享同一行？如果没有，在这种情况下我该如何正确地实现css呢？

html的代码块给我带来了问题：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3">
      {% block side_block %}
        {% get_category_list category %}
      {% endblock %}
    </div>
    <div class="col-sm-9 col-sm-offset-3">
      <div>
        {% block body %}{% endblock %}
      </div>
    </div>
  </div>
</div> 

以及由{% get_category_list category %}呈现的代码块：

{% if cats %}
  <ul class="nav navbar-sidebar">
  {% for c in cats %}
    {% if c == act_cat %}<li class="active"> {% else %} <li>{% endif %}
    <a href="{% url 'category' c.slug %}">{{ c.name }}</a></li>
  {% endfor %}
{% else %}
  <li><strong>There are no categories present.</strong></li>
  </ul>
{% endif %}

Answer 1

仅仅看一眼就很难判断你的问题是什么，但这里有几个建议：

1. 检查您的填充，如果您在网格元素中添加了任何自定义填充，请确保将属性(box- size :box-box)添加到这些属性中，以确保元素的大小不会随着填充而增长。也试着检查一下你的导航元素。
2. 尝试删除( on sm-offset-3)，而不是将上面的两个元素放在一行和一个(on sm- 12 )中，这将确保它们都位于12列中，这也可能有助于你了解发生了什么。

这个属性可能会导致一些错误，我不建议在实际开发中使用它，但如果问题确实与填充有关，它可以帮助阐明一些问题：

在css中，您可以执行以下操作：

html,html *{box-sizing: border-box !important;}

即使这样可以工作并解决问题，请删除它，并继续将框大小属性仅应用于受影响的div，而不是html及其子项，因为永远不建议使用这样的语法。

Answer 2

您的问题是您正在使用offset。你不需要偏移。请参阅此JSFIDDLE。

所以基本上你做的是3(对于侧边栏)+3(对于偏移量)+9(对于main)，这大于12。如果你去掉偏移量，bootstrap会很自然地把你的div放在侧边栏旁边，你的总数就是12。

为了完整起见，更新后的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 sidebar">
      This is the sidebar
    </div>
    <div class="col-sm-9 main">
      <div>
        This is the main body
      </div>
    </div>
  </div>
</div> 

Answer 3

出现此问题是因为您正在使用以.col-sm开头的类...以此开头的类将保持其网格，直到视口宽度小于768px，然后它将恢复为单列结构。

如果你想保持栅格直到一个较小的视区，试着改变类，从.col-xs开始...例如：

.col-xs-3

https://jsfiddle.net/20jhf966/

此外，请查看Bootstrap文档以获取更多帮助，它有很好的文档记录：

http://getbootstrap.com/css/#grid-options