Question

我第一次使用bootstrap。现在我正试图制作一个简单的导航栏。

我有这个代码，我希望这会在页面顶部形成一个水平导航栏（与你在stackoverflow.com上看到的不同），但我得到了这个：{{3} }

我的代码如下：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    </head>
    <body>
        <nav class="navbar navbar-dark bg-dark">
            <a class="navbar-brand" href="#">
                <img src="/ph.png" height="30" alt="">
            </a>
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">LATEST</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">REVIEWERS</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">ABOUT</a>
                </li>
            </ul>
        </nav>
    </body>
</html>

Answer 1

你可以这样覆盖Bootstrap CSS ......

＆＃13;

/* make sidebar nav vertical */

@media (min-width: 768px) {
  .sidebar-nav .navbar .navbar-collapse {
    padding: 0;
    max-height: none;
  }
  .sidebar-nav .navbar ul {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li {
    float: none;
    display: block;
  }
  .sidebar-nav .navbar li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="sidebar-nav">
  <nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
      <img src="/ph.png" height="30" alt="">
    </a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">LATEST</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">REVIEWERS</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 2

我在Bootstrap 4中遇到了同样的问题，解决方案是在nav类上添加navbar-toggleable-sm。

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-light">

水平自举导航栏

2 个答案: