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

我有这个应该分割的页面。使用Bootstrap，侧边栏有一个col-sm-3侧边块，主要内容有一个col-sm-9主体块。我认为如果所有东西加起来都是12列，一切都会好的，但是当我在侧栏中输入导航div的时候，似乎忽略了整个网格系统，并且向下推动了主体块，在前面留下了一个很大的空白空间的侧边栏。如何阻止这两个div/navbars在Bootstrap中重叠

我对这一切还很新，还没有学会如何正确使用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类别％}渲染块：

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

来源

2015-09-17 Kyle Truong

这是一个有点很难说你的问题只是看看，但这里有几点建议：

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

此属性可能会导致一些错误，我不建议使用它的实际发展，但它可以帮助提供一些线索，如果问题确实涉及到填充：在你的CSS

，你可以这样做：

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

即使这个工作并解决此问题，请删除它，然后继续箱集束性应用到受影响的div，而不是HTML和它的孩子们，因为它永远不会建议使用语法喜欢这个。

来源

2015-09-17 20:38:41

于现货，谢谢！尝试了建议＃2，它完美运作。 –

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

因此，基本上你在做3（侧边栏）+3（用于偏移）+9（用于main），它大于12.如果删除偏移量，引导程序自然会将您的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>

来源

2015-09-17 20:50:01 Rash

的问题，因为你使用的是与.col-sm开始类...开始这个班会维持其格，直到存在的视宽度小于768px，那么它将恢复为一个列结构。

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