引导数据库4列未按预期对齐

Question

我是Bootstrap4的新手，但我已经阅读过this文档，它看起来非常简单，但是我无法让这些专栏正常工作。我基本上只是试图让所有的广告显示在页面的左侧，占据了col-8的大部分，在右侧我只是试图设置一个带有创建帖子按钮的小方框。它只会占用页面的col-4。

这是我的HTML (注意:我使用的是Django)：

{% extends 'base.html' %}

This is the create a post page

{% block head %}
<!-- {% load static %}
<link rel="stylesheet" href="{% static 'accounts/login.css' %}" type="text/css"> -->
<title>Zaneroo - Latest Ads</title>
{% endblock %}

{% block body %}

<div class="container"><br>

<a href="{% url 'classifieds:create_post' %}">Post an Ad</a><br><br>

<section id="latest-ads">

  <div class="ads">
    <div class="row">
      <div class="col-8">
        Ads
      </div>
    </div>
  </div>

  <aside class="create-post">
    <div class="row">
      <div class="col-4">
        Sidebar
      </div>
    </div>
  </aside>

</section>



  {% if messages %}
  {% for message in messages %}
  <br>{{ message }}<br>
  {% endfor %}
  {% endif %}

  {% for post in posts %}

  {% endfor %}
</div>
{% endblock %}

我知道bootstrap正在被使用，因为导航栏仍然有效，字体不是默认的，链接也不是，但由于某种原因，列不是并排的。就在彼此的正上方。

在我继承nav的base.html文件中，我在bootstrap上使用这个版本：

href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

Here是浏览器中超文本标记语言页面的图片。

任何帮助都是非常感谢的。

Answer 1

您需要将其包装在一个容器(或容器-流体)中，然后是一行，然后是您的列。

<section class="container" id="latest-ads">
  <div class="row">
    <div class="col-8 ads">
       Ads
    </div>
    <aside class="col-4 create-post">
     Sidebar
    </aside>
  </div>
</section>