Question

我的导航栏左侧有几个链接，右侧是社交媒体按钮。问题是，当我缩小窗口时，链接和按钮不会很快崩溃成药片。相反，右侧的社交媒体按钮位于左侧的链接下方。然后当窗口太窄而不适合链接时，就会出现药丸。

如何修改此选项以使导航栏在正确的位置折叠？非常感谢任何帮助：）

这是我的代码：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WebsiteName</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link1</a></li>
                <li><a href="#">Link2</a></li>
                <li><a href="#">Link3</a></li>
                <li><a href="#">Link4</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right nav-pills social-icons icon-circle icon-rotate">
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

如果您看到1000px，请添加自己想要的宽度。

@media (max-width: 1000px) {
      .navbar-header {
          float: none;
      }
      .navbar-left,.navbar-right {
          float: none !important;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }
      .navbar-fixed-top {
          top: 0;
          border-width: 0 0 1px;
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-nav {
          float: none!important;
          margin-top: 7.5px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
      .collapse.in{
          display:block !important;
      }
    }

Answer 2

您可以创建一个类，根据屏幕大小确定导航栏的宽度或更多。

@media ( max-width : 767px ) {
  .widthNavbar {
    width : 700px;
  }
}

或者你可以在两个值之间激活类：

 @media ( min-width : 768px ) and ( max-width : 979px ) {
   .widthNavbar {
     width : 700px;
   }
 }

Bootstrap导航栏在正确的位置没有折叠到药丸

2 个答案: