文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap css主容器div落在侧面导航栏的下方

问Bootstrap css主容器div落在侧面导航栏的下方
EN

Stack Overflow用户
提问于 2018-08-05 04:08:06
回答 1查看 184关注 0票数 0

我最近得到了一个bootstrap 4主题。我一直在修改一些文件以使用flask。然而，当我将页面大小更改为更全尺寸的桌面浏览器大小时，我不能理解为什么我的“主容器”div会掉到导航栏下面？

在原始引导程序文件中，index.html文件在单个页面上包含导航栏和页面内容。对于flask，我在layout.html、index.html和_navbar.html这三个文件之间移动了大部分内容

我希望这是在右侧的导航栏时，这是伸展到完整的桌面大小，但我不能找出什么改变。

layout.html

代码语言：javascript
复制
<!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>&copy; ME | &copy;ME </small></small></center></p>
    </footer>
</html>

index.html

代码语言：javascript
复制
{%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%}

_navbar.html

代码语言：javascript
复制
[![<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>

​

​

html
css
bootstrap-4
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-05 04:23:58

默认情况下，Divs具有display: block，这使得它们一个接一个地放在一起。

为了正确定位它们，您可以：

  • 将它们包装在容器div中并使用flexbox进行定位(引导器行和列)，
  • 使用浮点(引导浮点类)

下面是一个使用浮点数来定位div的例子。

代码语言：javascript
复制
.container {
  width: 500px;
}
.nav {
  float: left;
  width: 30%;
  height: 200px;
  background-color: red;
}

.content {
  float: left; 
  width: 70%;
  height: 200px;
  background-color: blue;
}

.clear {
  clear: both;
}
代码语言：javascript
复制
<div class="container">
  <div class="nav">
  </div>
  <div class="content">
  </div>
  <div class="clear">
  </div>
</div>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51689206

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档