layout.html

Question

我最近获得了bootstrap 4主题。我一直在更改一些文件以使用flask。但是，当我将页面大小更改为更完整的桌面浏览器大小时，我无法弄清楚为什么我的“主容器” div低于导航栏？

在原始的引导文件中，index.html文件在单个页面上具有导航栏和页面内容。对于flask，我已将大部分内容移至三个文件layout.html，index.html和_navbar.html

之间

我希望它在导航栏的右侧延伸到整个桌面大小，但我无法确定要更改的内容。

layout.html

<!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

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

[![<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>

Answer 1

默认情况下，div的display: block使其彼此位于顶部。

为了正确放置它们，您可以：

将它们包装在容器div中，并使用flexbox定位（引导行和列），
使用浮点数（Bootstrap浮点类）

以下是使用浮点数定位div的示例。

.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;
}

<div class="container">
  <div class="nav">
  </div>
  <div class="content">
  </div>
  <div class="clear">
  </div>
</div>

Bootstrap CSS主容器div低于侧面导航栏

layout.html

index.html

_navbar.html

1 个答案: