引导导航栏 - 我修复了导航栏,但无法再看到链接



我正在搞乱引导程序,只是想大致了解一些基本功能。我正在弄乱导航栏,并设法将我的导航栏固定在页面顶部,但是当我全屏进入窗口时,我无法再看到导航栏中的链接。我只能看到下拉按钮。我正在关注引导程序网页本身的所有信息。有人知道为什么吗?

https://v4-alpha.getbootstrap.com/components/navbar/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>

<nav class="navbar fixed-top navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>
<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>
<div class = 'container'>
dsfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
sdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdfsdf sdf sdf sdfsdfsdf sdf sdfv sdfsdfsdf sdf sdf sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf vsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdf
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfv
sdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfvsdfsdfsdf sdf sdfsdfsdfsdf sdf sdfsdfsdfsdf sdf sdf
</div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

默认情况下,Bootstrap 4 导航栏是可移动的,除非使用 navbar-toggleable-* 类之一显式覆盖。由于导航栏中未指定任何内容,因此它始终处于折叠/移动状态。如果您希望它在更宽的屏幕上显示链接,请指定适当的范围,例如:navbar-toggleable-md...

<nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

演示:http://www.codeply.com/go/IoTTQGpOXy

相关内容

  • 没有找到相关文章

最新更新