首页 文章

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

提问于
浏览 次
0

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

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

  • 如果我使用修改后的.container宽度和最大宽度设置保留原始Bootstrap.css文件，导航栏将显示为正常，但在命中768px断点后元素将消失 . 没有汉堡包图标，所有其他样式都是正常的 .

  • 使用从媒体查询断点设置为0的引导站点重新编译的Bootstrap.css文件，无论站点宽度如何，导航栏都保持折叠状态，汉堡包图标打开导航元素 .

到目前为止我做了什么：

  • 编译了一个新的bootstrap.css文件，其中所有屏幕大小的媒体断点都设置为0

  • 已删除视口元标记

  • 将.container宽度设置为 !important 修饰符固定

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

responsive-design twitter-bootstrap-3

2 回答

  • 1

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

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

    回复于
  • 0

    要使导航栏永不折叠到其垂直移动视图，请将 @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;
}
    回复于

相关问题