Question

我似乎无法在首页第一栏的左侧找到我的主页。我创建了一个主页，该主页位于导航栏部分下，但应位于其右侧。我试过添加一个容器，但是没有用。有什么建议我该怎么做？输出应在左侧为导航栏，在右侧为内容。

主页

{% 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>

enter image description here

Answer 1

您可能会误以为元素的顺序将决定它们是显示在左侧还是右侧。并非总是如此。

此外，包含项有些棘手，因为您实际上不会在一个地方看到完整的代码。您必须在脑子里想象一下它，或者可以暂时将所有代码粘贴在一起，然后在以后将其分解（包括在内）。在构建页面时，最后一种方法可能对您来说是个好主意。进行构建和划分所需的时间可能比在进行故障排除时花费的时间少。

我的意思是：

    {% include 'includes/_dashboard.html' %}
    <div class="container">{% block body %}{% endblock %}</div>

不将仪表板放在左侧。 css是将仪表板放在左侧的

。

您似乎在烧瓶项目中使用了引导程序，因此也许您应该查看有关使用左侧导航仪表板构建页面的一些引导程序教程-仅Google可供选择。 Here's one.

但是，我的建议是将flask / jinja模板构建为单个模板页面，然后将其分解。或者至少首先进行基本的脚手架，然后在对其进行微调时将其分解。

Flexbox Flexbox Flexbox ...

Bootstrap4使用flexbox，这对于布局来说是惊人的。实际上，是如此重要，以至于Bootstrap3和Bootstrap4之间的核心区别是从浮动对象移动到flexbox进行布局。如果您花30分钟来学习它，您会留下深刻的印象，以至于您想为此购买啤酒。

Here is a great tutorial on using flexbox。 here是一个很好的flexbox备忘单。

CSSGrid

就像CSS Grid一样，flexbox也随之出现-另一个令人赞叹的布局工具（但要学习更多的知识-随后也要强大得多）。但是您还会发现CSS Grid对您有用。实际上，从这里开始。

Answer 2

有几种方法可以使容器与CSS对齐。（浮动，位置，网格，弯曲等）最简单的方法是将float: left都添加到您的左侧菜单容器和巨型机中。不过，您应该考虑在响应能力方面特别谨慎地考虑要构建DOM，并添加将来的功能。

并排html容器

2 个答案:

Flexbox Flexbox Flexbox ...

CSSGrid