【发布时间】：2018-05-26 08:29:32
【问题描述】：
我希望我的主要内容和 Sidewidget 在同一行。凭借我对引导网格的了解，我试图完成这项工作，但侧边小部件堆叠在内容下方而不是侧面。这是所需的 sn-ps。
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
我的 {% 块内容 %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
<a href="/author/{{post.author}}">{{post.author}}</a>
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<a href="{{post.slug}}" class="btn-readmore"><button class="btn btn-primary">Read More</button></a>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
我的 {% Sidewidget %} 块
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">Web Design</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
我尝试过调整，但似乎没有任何效果
我想要这样的页面：
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
【问题讨论】：
标签： django twitter-bootstrap bootstrap-grid