Html 引导css主容器div位于侧导航栏下方
我最近得到了一个Bootstrap4主题。我一直在更改一些文件以使用flask。但是，当我将页面大小更改为更大的桌面浏览器大小时，我无法理解为什么我的主容器div低于导航栏 在原始引导文件中，index.html文件将导航栏和页面内容放在一个页面上。对于flask，我已经将大部分内容移动到layout.html、index.html和_navbar.html三个文件之间 我想这是在右边的导航栏时，这是伸展到完整的桌面大小，但我不能想出什么改变 layout.html index.html _navbar.html 默认情况下，div具有display:block，使它们位于彼此的顶部 为了正确定位它们，您可以： 将它们包装在容器div中，并使用flexbox定位引导行和列， 使用浮动引导浮动类 下面是一个使用浮动定位div的示例。 .集装箱{ 宽度：500px； } .导航{ 浮动：左； 宽度：30%； 高度：200px； 背景色：红色； } .内容{ 浮动：左； 宽度：70%； 高度：200px； 背景颜色：蓝色； } .清楚{ 明确：两者皆有； }Html 引导css主容器div位于侧导航栏下方,html,css,bootstrap-4,Html,Css,Bootstrap 4,我最近得到了一个Bootstrap4主题。我一直在更改一些文件以使用flask。但是，当我将页面大小更改为更大的桌面浏览器大小时，我无法理解为什么我的主容器div低于导航栏 在原始引导文件中，index.html文件将导航栏和页面内容放在一个页面上。对于flask，我已经将大部分内容移动到layout.html、index.html和_navbar.html三个文件之间 我想这是在右边的导航栏时，这是伸展到完整的桌面大小，但我不能想出什么改变 layout.html index.html _na
对不起，我不是这方面的专家。但是会有这样一个例子吗？编辑了答案，添加了一个浮点数的例子。谢谢你的工作，我唯一的问题是，当页面的大小更大时，页面的格式不正确。您可以使用媒体查询根据屏幕大小使用css，也可以使用引导浮动类：您必须在导航栏和内容上使用2个类：float none float lg left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Explore Pages</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">View Components</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
<a href="pages-app.html" class="mr-3">App Pages</a><a href="pages-utility.html" class="mr-3">Utility Pages</a>
</section>
</div>
</div>
</div>
</div>
{%endblock%}
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
<a href="nav-side-user.html" class="dropdown-item">Profile</a>
<a href="utility-account-settings.html" class="dropdown-item">Account Settings</a>
<a href="#" class="dropdown-item">Log Out</a>
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
<a href="nav-side-team.html" class="nav-link">Team Overview</a>
</li>
<li class="nav-item">
<a href="nav-side-project.html" class="nav-link">Project</a>
</li>
<li class="nav-item">
<a href="nav-side-task.html" class="nav-link">Single Task</a>
</li>
<li class="nav-item">
<a href="nav-side-kanban-board.html" class="nav-link">Kanban Board</a>
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
<a href="nav-side-user.html" class="dropdown-item">Profile</a>
<a href="utility-account-settings.html" class="dropdown-item">Account Settings</a>
<a href="#" class="dropdown-item">Log Out</a>
</div>
</div>
</div>
</div>
</div>