Question

我遇到的问题是主网站内容的div是使用整个网页，但是我希望它从顶部导航栏下面开始。这导致页面的某些内容被顶部导航栏剪切。

在这里，我们看到顶部导航栏占用了正确数量的屏幕http://prntscr.com/gty4u9

但是在这里，我们看到页面的其余部分占用了所有内容，当我希望它除了顶级菜单之外还要占用所有内容。 http://prntscr.com/gty54s

<div class="navbar navbar-fixed-top navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand title" href="#">DSUM</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Sign Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
</div>
<!-- /.navbar -->

<div class="container-fluid">
    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
            <div class="sidebar-nav">
                <ul class="nav">
                    <li ><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li class="nav-divider"></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/span-->

        <div class="col-xs-12 col-sm-9">
            <br>
            <div class="jumbotron">
                <a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
                <h1>Hello, world!</h1>
                <p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
            </div>
            <div class="row">

            </div>
            <!--/row-->
        </div>
        <!--/span-->


    </div>
    <!--/row-->

    <hr>



</div>
<!--/.container-->

这是我的CSS

body {
    padding-top: 50px;
}

footer {
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 768px) {
    .row-offcanvas {
        position: relative;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
        background: #ecf0f1;
    }

    .row-offcanvas-left .sidebar-offcanvas {
        left: -40%;
    }

    .row-offcanvas-left.active {
        left: 40%;
    }

    .sidebar-offcanvas {
        position: absolute;
        top: 0;
        width: 40%;
        margin-left: 12px;
    }
}

#sidebar {
    padding: 15px;
    margin-top: 10px;
}

.title {
    background-color: #1F70A8;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #e1ffff;
    width: 185px;
}

.sidebar-item-group {
    color: #637083;
    font-family: 'Lato', sans-serif;
    font-weight: bold
}

Answer 1

首先，为了更多语义HTML，请开始使用<nav>，<main>，<header>等标记。

要解决您的问题，只需将padding-top添加到<main>标记（您的网页其余部分的容器），该标记等于导航栏的height ..

即使是bootstrap文档也为他们的导航栏推荐了这个解决方案，即使我认为他们已经为它创建了一个类，我认为它被称为page-header ..所以如果你正在使用bootstrap，那就去做吧...

[编辑] 实际上在查看了boostrap文档后，如果您使用他们的框架，您只需要添加类.navbar-static-top

分隔顶部和底部菜单容器

1 个答案: