调整窗口大小时如何防止引导导航栏崩溃 [英] How to prevent a bootstrap navbar from collapsing when window resizing

问题描述

我希望导航栏在所有页面上折叠，但我希望它在1140像素宽时保持展开状态.我该怎么做?这是小提琴

I want my navbar to collapse on all pages except one where I want it to stay expanded at 1140px wide. How would I do this? here is a fiddle

这是我的导航栏

<div class="navbar navbar-default 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>
      
      <div class="navbar-inline">
        <a class="navbar-brand hidden-xs" href="/Home">
          <img alt="Brand" src="~/Images/brandImagenew.png">
        </a>
      </div>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
      </ul>
      @Html.Partial("_LoginPartial")
    </div>
  </div>
</div>

推荐答案

添加的CSS重置导航栏，因此它不会响应，您可能不需要所有CSS，但是您可以查看下面的链接以获取更多信息

The added CSS resets the navbar so it won't respond, you probably don't need all of that CSS but you can check the link below for more info.

这里是无响应CSS 的Bootstrap文档的链接在这里您可以专门提取所需的东西.

Here's a link to the Bootstrap Docs for Non-Responsive CSS where you can pull out specifically what you may need.

此外，您的jsfiddle中的 navbar-header 类中似乎缺少一个封闭的div标签.

Also, there seems to be a closing div tag missing from your navbar-header class in your jsfiddle.

/**FOR DEMO ONLY**/

@media (max-width: 767px) {
  .navbar-default #search-group {
    margin-top: 15px;
  }
}
/** THE ABOVE FOR DEMO ONLY**/

.navbar-default .container .navbar-header,
.navbar-default .container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}
/* Always float the navbar header */

.navbar-default .navbar-header {
  float: left;
}
/* Undo the collapsing navbar */

.navbar-default .navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
  visibility: visible !important;
}
.navbar-default .navbar-toggle {
  display: none;
}
.navbar-default .navbar-collapse {
  border-top: 0;
}
.navbar-default .navbar-brand {
  margin-left: -15px;
}
/* Always apply the floated nav */

.navbar-default .navbar-nav {
  float: left;
  margin: 0;
}
.navbar-default .navbar-nav > li {
  float: left;
}
.navbar-default .navbar-nav > li > a {
  padding: 15px;
}
/* Redeclare since we override the float above */

.navbar-default .navbar-nav.navbar-right {
  float: right;
}
/* Undo custom dropdowns */

.navbar-default .navbar .navbar-nav .open .dropdown-menu {
  position: absolute;
  float: left;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-width: 0 1px 1px;
  border-radius: 0 0 4px 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #333;
}
.navbar .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar .navbar-nav .open .dropdown-menu > .active > a,
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #fff !important;
  background-color: #428bca !important;
}
.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  color: #999 !important;
  background-color: transparent !important;
}
/* Undo form expansion */

.navbar-default .navbar-form {
  float: left;
  width: auto;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
/* Copy-pasted from forms.less since we mixin the .form-inline styles. */

.navbar-default .navbar-form .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
.navbar-default .navbar-form .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}
.navbar-default .navbar-form .form-control-static {
  display: inline-block;
}
.navbar-default .navbar-form .input-group {
  display: inline-table;
  vertical-align: middle;
}
.navbar-default .navbar-form .input-group .input-group-addon,
.navbar-default .navbar-form .input-group .input-group-btn,
.navbar-default .navbar-form .input-group .form-control {
  width: auto;
}
.navbar-default .navbar-form .input-group > .form-control {
  width: 100%;
}
.navbar-default .navbar-form .control-label {
  margin-bottom: 0;
  vertical-align: middle;
}
.navbar-default .navbar-form .radio,
.navbar-default .navbar-form .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}
.navbar-default .navbar-form .radio label,
.navbar-default .navbar-form .checkbox label {
  padding-left: 0;
}
.navbar-default .navbar-form .radio input[type="radio"],
.navbar-default .navbar-form .checkbox input[type="checkbox"] {
  position: relative;
  margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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" />
<div class="navbar navbar-default 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>
      <div class="navbar-inline">
        <a class="navbar-brand hidden-xs" href="/Home">
          <img alt="Brand" src="http://placehold.it/100x25/ff0/ff0">
        </a>

        <div class="form-group" id="search-group">
          <input type="text" class="form-control" placeholder="Search" id="searchQuery" name="searchQuery">
        </div>
      </div>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="">About</a>

        </li>
        <li><a href="">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</div>

这篇关于调整窗口大小时如何防止引导导航栏崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！