如何阻止这两个 divs/navbars 在 Bootstrap 中重叠

Question

我有这个页面需要分段。使用 Bootstrap，侧边栏有一个 col-sm-3 的侧块，主要内容有一个 col-sm-9 的正文块。我想如果所有东西加起来达到 12 列，一切都会好起来的，但是当我在 sideblock 中输入一个 nav div 东西时，它似乎只是忽略了整个网格系统并将 body 块向下推，留下一个大侧边栏前面空 space。

我对这一切还很陌生，还没有学会如何正确使用 css。如果重要的话，我使用了 bootstrap CDN。有没有办法只使用 bootstrap 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 类别 %} 呈现的代码块：

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

仅通过外观很难判断您的问题是什么，但这里有一些建议：

检查你的填充，如果你有任何自定义填充添加到网格元素，请确保添加属性 (box-sizing: border-box) 到那些将确保元素大小的元素不会随着填充而增长。也尝试在您的导航元素上进行检查。
尝试删除 (col-sm-offset-3) 并将上面的两个元素换成一行和一个 (col-sm-12)，这将确保它们都位于 12 列中，这可能还可以帮助您了解正在发生的事情。

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

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

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

即使这有效并解决了问题，请将其删除并继续将框大小调整属性仅应用于受影响的 div，而不是 html 及其子项，因为从不建议这样做使用这样的语法。

Answer 2

您的问题是您正在使用 offset。你不需要抵消。看到这个 JSFIDDLE.

所以基本上你在做 3（侧边栏）+3（偏移量）+9（主要）大于 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

如何阻止这两个 divs/navbars 在 Bootstrap 中重叠

How to stop these two divs/navbars from overlapping in Bootstrap

html

css

twitter-bootstrap

sidebar

overlap