I've got this page that should be segmented. Using Bootstrap, there's a side block of col-sm-3 for the sidebar, and a body block of col-sm-9 for the main content. I thought if everything added up to 12 columns, everything would be OK, but when I input a nav div thing in the sideblock, it seems to just ignore the whole grid system and pushes the body block downwards, leaving a big empty space in front of the sidebar.
I'm still pretty new to all of this and haven't learned how to properly use css. I used the bootstrap CDN if that matters. Is there anyway to makes the sidebar and the main content share the same row using just the bootstrap CDN? If not, how would I go to implement the css properly in this case?
The block of html giving me problems:
<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>
and the block of code rendered by {% 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 %}
It is a bit difficult to tell what your issue is just by looking, but here are a couple of suggestions:
This property might cause some errors, and I wouldn't recommend using it for actual development but it could help shed some light if the issue is indeed related to padding:
in your css, you can do something like:
html,html *{box-sizing: border-box !important;}
Even if this works and resolves the issue, please remove it and proceed to apply the box-sizing property to affected divs only and not html and it's children as it is never recommended to use syntax like this.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments