html - 调整窗口大小时如何防止 Bootstrap 导航栏折叠

Question

我希望我的导航栏在所有页面上折叠，但我希望它在 1140 像素宽度处保持扩展的页面除外。我该怎么做？这是一个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>

Answer 1

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

这是 Non-Responsive CSS 的 Bootstrap 文档的链接您可以在其中专门提取您可能需要的内容。

此外，您的 jsfiddle 中的 navbar-header 类似乎缺少一个结束 div 标记。

/**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>