我似乎无法将我的主页与左侧第一列的导航栏相邻。我创建了一个位于导航栏部分下面的主页，但它应该位于右侧。我试过添加一个容器但是没有用。有关如何做到这一点的任何建议？输出应该是左侧的导航栏和右侧的内容。
主页
{% extends 'layout.html' %}
{% block body %}
<div class="jumbotron text-center">
<h1>Welcome To myStocks Page</h1>
<p class="lead">This application is built on the Python Flask framework</p>
</div>
{% endblock %}
布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stocks</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"stylesheet"
</head>
<body>
{% include 'includes/_dashboard.html' %}
<div class="container">{% block body %}{% endblock %}</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
您可能会误解元素的顺序将决定它们是向左还是向右显示。这并非总是如此。
此外，包含有点棘手，因为你没有真正在一个地方看到完整的代码。要么你必须在心理上想象它，要么你可以暂时将代码粘在一起，然后再分开（包括在内）。在构建页面时，最后一种方法对您来说可能是一个好主意。构建它，然后划分它可能需要更少的时间，而不是在你去的时候进行故障排除。
我的意思是：
{% include 'includes/_dashboard.html' %}
<div class="container">{% block body %}{% endblock %}</div>
没有把仪表板放在左边。 css是将仪表板放在左侧的原因。
看起来你正在使用bootstrap和你的烧瓶项目，所以也许你应该查看一些关于使用左侧导航仪表板构建页面的bootstrap教程 - 有很多可供选择，只有google。 Here's one.
不过，我的建议是将您的flask / jinja模板构建为单个模板页面，然后再将其分解。或者至少先做基本的脚手架，然后在微调时将其分解。
Bootstrap4使用flexbox，这对于布局来说非常棒。实际上，Bootstrap3和Bootstrap4之间的核心差异从浮动到弹性框架的布局非常重要。如果你投入30分钟学习它，你会留下深刻印象，你会想要自己买啤酒。
Here is a great tutorial on using flexbox。而here是一个很好的flexbox备忘单。
正如flexbox出现一样，CSS Grid也是如此 - 另一个令人惊叹的布局工具（但需要更多参与学习 - 后来也更强大一些）。但是你也会发现CSS Grid对你有用。事实上，从这里开始。
有几种方法可以将容器与CSS对齐。 （浮动，位置，网格，弹性等）最简单的方法是将float: left添加到两个：左侧菜单容器和您的jumbotron。尽管如此，您应该考虑在响应性方面特别谨慎地构建您的DOM，以及将要添加的未来功能。