我有这个应该被细分的页面。使用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 %}
答案 0 :(得分:2)
通过观察来了解你的问题有点困难,但这里有几点建议:
此属性可能会导致一些错误,我不建议将其用于实际开发,但如果问题确实与填充有关,则可能有助于解决问题:
在你的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文档以获得更多帮助,这些文档记录得很清楚: