Bootstrap4正文未显示

时间：2017-05-26 23:49:19

标签： html css twitter-bootstrap 

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div style="color:black;">Hello World!</div>

我有一个bootstrap 4 top nav，我的身体不会显示，最后是 hello world 。这是怎么回事？我没有看到它不显示的原因。

这是css问题还是html问题？我的代码在我尝试在线编辑器的任何地方都能正确编译，因此它看起来不像是一个环境问题。

1 个答案:

答案 0 :(得分：1)

它隐藏在nav后面，所以只需添加margin-top即可立即查看：

.hello{
  margin-top: 100px;
}

解决方案1 ​​:(添加margin-top）：

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}

.hello{
  margin-top: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar fixed-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div class="hello">Hello World!</div>

解决方案2 :(删除fixed-top并使用sticky-top），因为固定设置位置会将内容向上移动：

.navbar-btn {
    color: white;
    background-color: rgba(255, 255, 255, 0);
}
.navbar-btn:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
.dropdown-item {
    color: white;
}
.dropdown-item:hover {
    color: skyblue;
    background-color: rgba(255, 255, 255, 0);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<nav class="navbar sticky-top navbar-inverse bg-inverse">
  <div class="flex-container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title</a>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <!-- Do this better somehow -->
      <button class="navbar-toggler" type="button"><span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="dropdown pull-right">
      <button class="btn navbar-btn dropdown-toggle" type="button" id="btnSettings" data-toggle="dropdown">
        <i class="fa fa-cog fa-lg"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right bg-inverse" aria-labelledby="btnSettings">
        <!--<button class="dropdown-item"><i class="fa fa-sign-in fa-lg"></i>&nbsp;Login</button>-->
        <!-- fa-address-card -->
        <button class="dropdown-item"><i class="fa fa-user fa-lg"></i>&nbsp;Profile</button>
        <button class="dropdown-item"><i class="fa fa-sign-out fa-lg"></i>&nbsp;Logout</button>
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Global Config</h6>
        <button class="dropdown-item"><i class="fa fa-globe fa-lg"></i>&nbsp;Lang</button>
        <button class="dropdown-item"><i class="fa fa-window-maximize fa-lg"></i>&nbsp;Theme</button>
      </div>
    </div>
  </div>
</nav>
<div class="hello">Hello World!</div>
<pre>
1
2
3
4
5
6
6
71
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7
1
2
3
4
5
6
6
7</pre>

相关问题
最新问题