Question

我有一个客户端正在对内部页面的响应式调整进行逆转，并希望保留新的页眉和页脚元素，减去响应功能。我们正在使用Bootstrap 3。

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

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

到目前为止我做了什么：

编译了一个新的bootstrap.css文件，其中所有屏幕尺寸的媒体断点都设置为0
删除了视口元标记
将.container width设置为!important修饰符

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

Answer 1

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

使用无响应功能重建导航栏大约需要45分钟，相比之下，需要大约2.5小时才能找到修复程序。

Answer 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;
}

如何删除Bootstrap 3中的导航栏更改功能

2 个答案: