如何在 Bootstrap 3 中删除导航栏更改功能答案

【问题标题】：How to remove navbar change functionality in Bootstrap 3如何在 Bootstrap 3 中删除导航栏更改功能
【发布时间】：2014-03-03 16:23:01
【问题描述】：

我有一个客户正在改变内部页面的响应式改编课程，并希望保留新的页眉和页脚元素，减去响应式功能。我们正在使用 Bootstrap 3。

我的问题是所有关于删除响应功能的建议都会导致

如果我使用修改后的 .container 宽度和最大宽度设置保留原始 Bootstrap.css 文件，导航栏会正常显示，但在命中 768px 断点后元素会消失。没有出现汉堡图标，其他样式都正常。
使用从引导站点重新编译的 Bootstrap.css 文件并将媒体查询断点设置为 0，无论站点宽度如何，导航栏都保持折叠状态，并且汉堡图标打开导航元素。

到目前为止我做了什么：

编译了一个新的 bootstrap.css 文件，所有屏幕尺寸的媒体断点都设置为 0
移除了视口元标记
使用!important 修饰符将.container 宽度设置为固定

没有从内部页面中删除 Bootstrap，我还有什么其他选择？该项目使用 bower 进行包管理。因此，我无法使用现有的 less 编译器来重建 css 文件，并且仅限于使用 customizer site

【问题讨论】：

我不明白 Bower 如何阻止您使用 Less 编译器。

标签： responsive-design twitter-bootstrap-3

【解决方案1】：

由于没有快速简便的方法来删除该功能，我只是继续重建导航栏，减去 Bootstrap 绑定，并在 SCSS 中复制元素样式。

使用无响应功能重建导航栏大约需要 45 分钟，而寻找修复需要大约 2.5 小时。

【讨论】：

【解决方案2】：

要使导航栏永远不会折叠到其垂直移动视图，请将@grid-float-breakpoint Less 变量设置为0px。
此变量是浏览器视口宽度，在该宽度下方导航栏折叠。
另见http://getbootstrap.com/css/#grid-less

或者，从官方 Bootstrap Non-responsive Example 获取适用的 CSS 块：

// From http://getbootstrap.com/examples/non-responsive/non-responsive.css
.container .navbar-header,
.container .navbar-collapse {
  margin-right: 0;
  margin-left: 0;
}

/* Always float the navbar header */
.navbar-header {
  float: left;
}

/* Undo the collapsing navbar */
.navbar-collapse {
  display: block !important;
  height: auto !important;
  padding-bottom: 0;
  overflow: visible !important;
}

.navbar-toggle {
  display: none;
}
.navbar-collapse {
  border-top: 0;
}

.navbar-brand {
  margin-left: -15px;
}

/* Always apply the floated nav */
.navbar-nav {
  float: left;
  margin: 0;
}
.navbar-nav > li {
  float: left;
}
.navbar-nav > li > a {
  padding: 15px;
}

/* Redeclare since we override the float above */
.navbar-nav.navbar-right {
  float: right;
}

/* Undo custom dropdowns */
.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;
}

【讨论】：