Question

我有这个应该被细分的页面。使用Bootstrap，侧栏有col-sm-3的侧块，主要内容有col-sm-9的块体。我想如果一切都添加到12列，一切都会好的，但是当我在侧边栏中输入导航div时，它似乎只是忽略整个网格系统并向下推动体块，在前面留下一个很大的空白空间侧边栏。

我仍然对这一切都很陌生并且还没有学会如何正确使用CSS。如果重要的话，我使用了bootstrap 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

通过观察来了解你的问题有点困难，但这里有几点建议：

检查填充，如果有任何自定义填充添加到网格元素，请确保将属性（box-sizing：border-box）添加到那些将确保元素的大小不会随填充增长的属性。尝试在你的导航元素上检查它。
尝试删除（col-sm-offset-3），然后将上面的两个元素包装成一行和一个（col-sm-12），这将确保它们都位于12列中，这可能也有帮助你会发现发生了什么。

此属性可能会导致一些错误，我不建议将其用于实际开发，但如果问题确实与填充有关，则可能有助于解决问题：

在你的CSS中，你可以做类似的事情：

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

即使这有效并解决了问题，请将其删除并继续将box-sizing属性仅应用于受影响的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

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

3 个答案: