【问题标题】:bootstrap disabling collapse/toggleable on navbar [duplicate]引导程序禁用导航栏上的折叠/切换[重复]
【发布时间】:2017-08-27 03:52:29
【问题描述】:

如何让我的导航栏在调整窗口大小时不折叠/切换?我尝试添加

.collapse{
   display: inline-block;
 }

到我的CSS。这样,当调整窗口大小时,导航栏元素最终会堆叠。我也在使用 bootstrap 4 alpha 6

这是我的导航栏代码:http://www.bootply.com/mHeWTUSxAM

【问题讨论】:

    标签: twitter-bootstrap css


    【解决方案1】:

    updated Bootply

    只需使用navbar-toggleable-xl 代替navbar-toggleable-md

    工作sn-p

    <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">
    <nav class="navbar navbar-toggleable-xl navbar-inverse bg-inverse">
    
      <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="#menu-toggle" class="nav-link" id="menu-toggle">Menu</a>
          </li>
        </ul>
        <ul class="navbar-nav dropdown dropdown-menu-right ml-auto">
          <li class="nav-item ">
            <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">logged in as</a>
    
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Logout</a>
              <a class="dropdown-item" href="#">My Movements</a>
            </div>
          </li>
        </ul>
      </div>
    
    </nav>

    【讨论】:

      【解决方案2】:
      how i did it is by giving .btn.btn-navbar{display:none;}
      and by giving .nav-collapse{height:auto}
      it worked like this but i believe it is not best solution 
      referenced to bootstrap 4 documentation you should look into that "Responsive behaviors
      

      导航栏可以利用 .navbar-toggler、.navbar-collapse 和 .navbar-toggleable-* 类在其内容折叠在按钮后面时进行更改。结合其他实用程序,您可以轻松选择何时显示或隐藏特定元素。”

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2017-11-05
        • 2018-09-11
        • 2021-08-23
        • 2016-04-01
        • 1970-01-01
        • 2018-04-02
        • 1970-01-01
        相关资源
        最近更新 更多