Question

我使用BootStrap开发了一个自定义导航栏，单击该按钮时会水平折叠。它工作正常，但当我缩小屏幕大小时，它应该垂直折叠，就像BootStrap网站中给出的经典示例一样。我无法找到任何解决方案，当我用Google搜索时，我通过一个点测量所有测量值应该是％而不是px，我尝试了但我的导航栏没有正确行为。

/ * HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
    <!-- 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">
    <!-- 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>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
    <script src="homePage.js"></script>
</head>

<body>
    <nav class="navbar navbar-light animated fadeInLeft" style="background-color: #C0C0C0 ;">
        <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
        <h1 class="navbar-brand mb-0 move-header ">NavBrand</h1>
        <div class="collapse animated fadeInLeft" id="navbarNav">
            <ul class="navbar-nav">
                <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="#">Features</a> </li>
                <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
                <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li>
            </ul>
        </div>
    </nav>
    <div class="container"></div>
</body>

</html>

// CSS

   /*changing the background color*/

body {
    background-color: #F8F9F9;
}


/*moving the navBrand name to left after the toggle icon*/

.move-header {
    padding-left: 60px;
}


/*making the border none for the toggle button*/

.navbar-toggler {
    border: none;
}


/*making the blue border none,it comes when clicking the toggle*/

.navbar-toggler.active.focus,
.navbar-toggler.active:focus,
.navbar-toggler.focus,
.navbar-toggler:active.focus,
.navbar-toggler:active:focus,
.navbar-toggler:focus {
    outline: 0;
}

/*navbar settings*/

.navbar {
    margin-top: 40px;
    height: 54px;
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
    flex-flow: row nowrap;
    display: inline-flex;
}


/*navbar items settings*/

.navbar-nav {
    flex-flow: row nowrap;
    padding-top: -10px;
}


/*giving gaps between each nav items*/

.nav-item {
    margin-right: 40px;
}


/*nullifying the default animation*/

.collapsing {
    -webkit-transition: height 0.01s;
    -moz-transition: height 0.01s;
    -ms-transition: height 0.01s;
    -o-transition: height 0.01s;
    transition: height 0.01s;
    margin-bottom: -15px;
}

Answer 1

尝试将整个导航栏的宽度设为100％，并使用px中导航栏的内容。这应该根据屏幕分辨率更改导航栏的大小，如果导航栏项超过整个条的像素宽度，它们将会崩溃。（如果这有意义吗？）

Answer 2

您似乎错过了媒体查询，该查询告诉浏览器何时将导航栏从行 - 弹性布局更改为垂直/折叠布局。当屏幕大小落在您指定的宽度范围内时，此媒体查询应与.collapsed类或类似于导航栏样式的CSS文件一起放置。对于智能手机，此屏幕尺寸通常介于0px和500px之间，如果您想要捕获平板电脑，则宽度介于800px之间。

https://css-tricks.com/css-media-queries/

您的HTML会显示一个div = class =＆＃34; collapse＆＃34;但是这个课程不在您的附加代码中。

Answer 3

它的原因;在.navbar-nav上。你可以通过删除.navbar的高度来解决这个问题，并设置flex-flow：row wrap;在.navbar类。 LiveFiddleLink 检查小提琴。

下面我要评论我的变化。如果你有任何问题，请在评论中提问我

  /*navbar settings*/
  .navbar {
    margin-top: 40px;/*Remove Height from here*/
    border-bottom-right-radius: 200px;
    border-top-right-radius: 200px;
    display: inline-flex;
    flex-flow: row nowrap;
  }
  /*navbar items settings*/

  .navbar-nav {
    flex-flow: row wrap;/*Change nowrap to wrap*/
  }
  /*giving gaps between each nav items*/

  .navbar-nav .nav-link {/*change the class nav-item to nav-link*/
    padding: 0.5em .5em;
  }

更新：您也可以使用媒体查询。 LiveFiddle Media Query使用媒体查询，您无需更改nowrap。只需要在屏幕475px上改变方向。

 @media only screen and (max-width:475px){
.navbar{
  padding:0.5rem 2rem;
}  
 .navbar-nav{
     flex-flow:column nowrap;
   }

 }

如果屏幕尺寸减小，导航栏无法响应

3 个答案: