时间戳

首页 > 解决方案 > 并排的 html 容器

html - 并排的 html 容器

问题描述

我似乎无法让我的主页与左侧第一列的导航栏相邻。我在导航栏部分下创建了一个主页，但应该在它的右侧。我试过添加一个容器，但没有奏效。关于我如何做到这一点的任何建议？输出应该是左侧的导航栏和右侧的内容。

主页

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

在此处输入图像描述

标签： html

解决方案

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

此外，包含有点棘手，因为您并没有真正在一个地方看到完整的代码。要么您必须在脑海中想象它，要么您可以暂时将代码全部粘贴在一起，然后稍后将其拆分（分成包含）。在您构建页面时，最后一种方法可能对您来说是个好主意。构建它然后分割它可能需要更少的时间，而不是随时进行故障排除。

我要说的是：

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

不把仪表板放在左边。CSS 将仪表板放在左侧。

看起来您正在使用引导程序与您的烧瓶项目，所以也许您应该查看一些有关使用左侧导航仪表板构建页面的引导程序教程 - 有很多可供选择，只有谷歌。这是一个。

不过，我的建议是将您的烧瓶/神社模板构建为单个模板页面，然后再将其分解。或者至少先做基本的脚手架，然后在微调时分解它。

弹性盒弹性盒弹性盒...

Bootstrap4 使用了 flexbox，这对于布局来说非常棒。事实上，Bootstrap3 和 Bootstrap4 之间的核心区别在于从浮动到 flexbox 的布局非常重要。如果你花 30 分钟来学习它，你会留下深刻的印象，以至于你会想给自己买一杯啤酒。

这是一个很好的使用 flexbox 的教程。这是一个很好的 flexbox 备忘单。

CSSGrid

就像 flexbox 出现一样，CSS Grid也出现了——另一个令人惊叹的布局工具（但需要更多的学习——随后也更强大）。但是你也会发现CSS Grid对你很有用。事实上，从这里开始。

推荐阅读