並排的 html 容器
[英]Side by side html containers
問題描述
我似乎無法將我的主頁與左側第一列的導航欄相鄰。 我創建了一個主頁，它位於導航欄部分下，但應該在它的右側。 我試過添加一個容器，但沒有用。 關於我如何做到這一點的任何建議？ 輸出應該是左側的導航欄和右側的內容。
主頁
{% 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>
2 個解決方案
解決方案1
1 已采納 2019-02-24 23:34:18
您可能會誤解元素的順序將決定它們是顯示在左側還是右側。 這並非總是如此。
此外，包含有點棘手，因為您並沒有真正在一個地方看到完整的代碼。 要么您必須在頭腦中想象它，要么您可以暫時將所有代碼粘在一起，然后稍后將其分解（分成包含）。 在您構建頁面時，最后一種方法可能對您來說是個好主意。 構建它然后分割它可能需要更少的時間，而不是在你進行時進行故障排除。
我要說的是：
{% include 'includes/_dashboard.html' %}
<div class="container">{% block body %}{% endblock %}</div>
不把儀表板放在左邊。 css 是將儀表板放在左側的原因。
看起來您正在將 bootstrap 與您的燒瓶項目一起使用，所以也許您應該查看一些關於構建帶有左側導航儀表板的頁面的引導程序教程 - 有很多可供選擇，只是谷歌。 這是一個。
不過，我的建議是將您的 Flask/jinja 模板構建為單個模板頁面，然后再將其分解。 或者至少先做基本的腳手架，然后在微調時將其分解。
彈性盒彈性盒彈性盒...
Bootstrap4 使用了 flexbox，布局方面非常棒。 事實上，Bootstrap3 和 Bootstrap4 之間的核心區別是從浮動到 flexbox 的布局非常重要。 如果你花 30 分鍾來學習它，你會印象深刻，以至於你會因為這樣做而想要給自己買一杯啤酒。
這是一個關於使用 flexbox 的很棒的教程。 這是一個很好的 flexbox 備忘單。
CSS網格
正如 flexbox 出現一樣， CSS Grid 也出現了——另一個令人驚嘆的布局工具（但需要更多的學習——隨后也更強大一些）。 但是您也會發現CSS Grid對您很有用。 事實上，從這里開始。
解決方案2
0 2019-02-24 23:38:12
有幾種方法可以將您的容器與 CSS 對齊。 (float, position, grid, flex, etc) 最簡單的方法 prob 將添加float: left到兩個：你的左邊菜單容器和你的大屏幕。 盡管如此，您應該考慮在響應性以及將添加的未來功能方面特別謹慎地構建您的 DOM。
Bootstrap 3並排容器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.