Question

我正在尝试使用bootstrap创建一个导航栏，并在其下放置一个div 我希望导航栏下的div占据页面的其余部分。问题是我不知道该怎么做，我是一个新手Bootstrap和CSS。

我已经创建了这样的导航栏：

 <nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>

并在其下面加上一个div：

 <div id='restofthepage'></div>

这是css：

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
.restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}

但是当我显示它时，我可以看到导航栏，但我想看到两个，并且导航栏下的div占据了所有屏幕。我怎么能这样做？

Answer 1

在您的CSS上将类更改为id。

＆＃13;

html, body {
  height: 100%; 
  width: 100%;
}
.navbar {
  top: 10px; 
  wisth: 100%;
}
#restofthepage{
  padding-top: 15px;
  height: 100%; 
  width: 100%; 
  background-color: red;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-inverse">
 <div class="container-fluid">
 <div class="navbar-header">
   <a class="navbar-brand" href="#">WebSiteName</a>
 </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Page 1</a></li>
  <li><a href="#">Page 2</a></li>
  <li><a href="#">Page 3</a></li>
 </ul>
</div>
</nav>
<div id='restofthepage'></div>

＆＃13;

Answer 2

您可以通过创建如下所示的行类来完成此操作。

    <div class="row" id="">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <ul class="nav navbar-nav">
                        <li style="background-color: #e97e36 "><a href="#" id="lhome">Home</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right" id="logoutb" hidden>
                        <li><a href="logout.jsp"><span class="glyphicon glyphicon-log-out"></span> Log Out</a></li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
 <div class="row" id='restofthepage'>
Rest of page content goes here.
</div>

CSS：navbar并在其下放置div

2 个答案: