Question

我在我的网站上使用bootstrap，当我调整浏览器大小时，Navbar变为3行。我不希望这种情况发生。

如果有人可以试一试，让我知道我需要改变什么，我会选择它。

干杯杰克

Answer 1

我认为所有这些都是您尝试装入容器的元素数量。例如，如果您删除某些链接，则不再存在该问题。

所以你可以根据自己的需要进行调整。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<h3>Fewer Links</h3>
<div class="navbar navbar-inverse">
  <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 href="/poultry" class="navbar-brand">All Things Poultry</a>
      <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a>

      <ul class="dropdown-menu" role="menu">
        <li class="text-center">AllThings Sites</li>
        <li class="divider"></li>
        <li><a href="/farming">AllThings Farming</a>

        </li>
        <li><a href="/livestock">AllThings Livestock</a>

        </li>
        <li><a href="/poultry">AllThings Poultry</a>

        </li>
      </ul>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li> <a href="/Poultry/geese">Geese</a>

        </li>
        <li> <a href="/Poultry/poultrysupplies">Supplies</a>

        </li>
        <li> <a href="/Poultry/turkeys">Turkeys</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/poultry/register">Register</a>

        </li>
        <li><a href="/poultry/login">Log in</a>

        </li>
        <li>
          <a data-toggle="modal" href="#selectLocation" class="pull-right">
            <img alt="Select Country" height="20" src="http://placehold.it/150x50" />
          </a>

        </li>
      </ul>
    </div>
  </div>
</div>
<hr>
<h3>Current Links</h3>
<div class="navbar navbar-inverse">
  <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 href="/poultry" class="navbar-brand">All Things Poultry</a>
      <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"><span class="caret"></span></a>

      <ul class="dropdown-menu" role="menu">
        <li class="text-center">AllThings Sites</li>
        <li class="divider"></li>
        <li><a href="/farming">AllThings Farming</a>

        </li>
        <li><a href="/livestock">AllThings Livestock</a>

        </li>
        <li><a href="/poultry">AllThings Poultry</a>

        </li>
      </ul>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li> <a href="/Poultry/chickens">Chickens</a>

        </li>
        <li> <a href="/Poultry/ducks">Ducks</a>

        </li>
        <li> <a href="/Poultry/poultryevents">Events</a>

        </li>
        <li> <a href="/Poultry/gamebirds">Game Birds</a>

        </li>
        <li> <a href="/Poultry/geese">Geese</a>

        </li>
        <li> <a href="/Poultry/poultrysupplies">Supplies</a>

        </li>
        <li> <a href="/Poultry/turkeys">Turkeys</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/poultry/register">Register</a>

        </li>
        <li><a href="/poultry/login">Log in</a>

        </li>
        <li>
          <a data-toggle="modal" href="#selectLocation" class="pull-right">
            <img alt="Select Country" height="20" src="http://placehold.it/150x50" />
          </a>

        </li>
      </ul>
    </div>
  </div>
</div>

Answer 2

添加您的响应式CSS文件

@media(max-width:1200px)  {

.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse {
    overflow-x: visible !important;
}
.navbar-header {
    position: relative;
    width: 100%;
}
.navbar-collapse.in {
  overflow-y: auto !important;
}
.collapse.in {
  display: block !important;
}
.navbar-toggle {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
    display: block;
}
}

1200px是你的制动点

bootstrap导航栏在折叠时变宽

2 个答案: