Question

我对bootstrap很新。我正在尝试开发一个非常简约的网站，我只有3个菜单项：我的图像标识，一个链接和一个按钮。我的菜单在使用移动设备时会崩溃，因为所有三个项目都应该适合小屏幕。有人可以帮我理解如何禁用崩溃但保持菜单响应吗？

这是我的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-  target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><img src="images/logo.png"/></a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Kom igång</a></li>
        <li>
          <p class="navbar-btn">
            <a href="#" class="btn btn-primary btn-sm" style="background: #D9534F; border-color: #D9534F;"><strong>Kundinlogg</strong></a>
          </p>
        </li>
      </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

提前多多谢谢！

雅各

Answer 1

- 你必须从

中删除崩溃

<button type="button" class="navbar-toggle" data-toggle="collapse" data-  target=".navbar-collapse">
<div class="collapse navbar-collapse">

或者您可以使用

.navbar-collapse, .navbar-collapse.collapse {
overflow: visible;}   
.navbar-toggle {
display: none;}

- 您也可以查看此答案可以帮助您完全禁用崩溃并保持菜单响应 Prevent menu from collapsing in 768px display CSS media query

Bootstrap Nav折叠禁用

1 个答案: