Question

我正在使用bootstrap来创建一个网站。这是导航栏的代码编辑：小提琴http://jsfiddle.net/cb6rxu2h/

<header>

        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header col-md-4 col-sm-12">
                    <a class="navbar-brand" href="#">BargainKart</a>
                </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="badge pull-right">4</span><i class="fa fa-shopping-cart"></i>
                        </a></li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal"><i class="fa fa-sign-in"></i>
                            Sign in</a></li>

                        </ul>

                    </div> <!--container fluid-->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav pull-right">
                            <li><a href="#">About</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Categories <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Electronics</a></li>
                                    <li><a href="#">Fashion</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">All</a></li>
                                </ul>
                            </li>
                        </ul>
                        <div class="col-sm-6 col-md-3 pull-right">
                            <form class="navbar-form" role="search">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search" name="q">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default" type="submit"><i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                                </form>
                                </div>
                            </div><!-- /.navbar-collapse -->
                    </nav>

            </header>

侧边栏的代码

<div class="wrapper">
                <aside>
                <div class="categories-bar content-fluid col-md-3 col-sm-12">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li><li class="active"><a href="#">Home</a></li>
                        <li><a href="#">About</a></li><li "><a href="#">Home</a></li>

                        <li><a href="#">About</a></li>  <li><a href="#">Shop</a></li>
                </ul>
            </div>
            </aside>

我使用的CSS是

aside {

    padding-bottom: 5000px;
    margin-bottom: -5000px;
    background-color: white;
    font-size: 1.5em;


}
.wrapper {

    position: relative;

    overflow: hidden;

}

我搞砸了很多，但仍然无法弄清楚为什么侧边栏和包装div重叠成标题。我可以使用填充，但是当我缩放浏览器时，为小屏幕浏览器提供了大量的空白空间。

Answer 1

由于您使用navbar-fixed-top给body填充导航栏高度应该解决此问题。将XX替换为您的高度值（以像素为单位）。

body {
    padding-top: XXpx;
}

您可以获得此提示here。

CSS：如何修复重叠的div

1 个答案: