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

时间:2015-09-17 20:16:29

标签: html css twitter-bootstrap sidebar overlap

我有这个应该被细分的页面。使用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 %}

3 个答案:

答案 0 :(得分:2)

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

  1. 检查填充,如果有任何自定义填充添加到网格元素,请确保将属性(box-sizing:border-box)添加到那些将确保元素的大小不会随填充增长的属性。尝试在你的导航元素上检查它。
  2. 尝试删除(col-sm-offset-3),然后将上面的两个元素包装成一行和一个(col-sm-12),这将确保它们都位于12列中,这可能也有帮助你会发现发生了什么。
  3. 此属性可能会导致一些错误,我不建议将其用于实际开发,但如果问题确实与填充有关,则可能有助于解决问题:

    在你的CSS中,你可以做类似的事情:

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

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

答案 1 :(得分:1)

您的问题是您使用的是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> 

答案 2 :(得分:1)

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

如果您希望将网格保留到较小的视口,请尝试将类更改为以.col-xs开头...例如:

.col-xs-3

https://jsfiddle.net/20jhf966/

另外,浏览一下Bootstrap文档以获得更多帮助,这些文档记录得很清楚:

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