如何删除Twitter Bootstrap 3中的响应功能？

Question

从Bootstrap 3开始,不再有用于响应式和标准样式表的单独文件.那么如何轻松删除响应功能呢？

Answer 1

要取消激活非桌面样式,您只需更改variables.less文件中的4行代码.在variables.less文件中设置屏幕宽度断点,如下所示:

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs:                  1px;
@screen-xs-min:              @screen-xs;
@screen-phone:               @screen-xs-min;

// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm:                  2px;
@screen-sm-min:              @screen-sm;
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md:                  3px;
@screen-md-min:              @screen-md;
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg:                  9999px;
@screen-lg-min:              @screen-lg;
@screen-lg-desktop:          @screen-lg-min;

这会将桌面样式媒体查询的最小宽度设置为较低,以便它适用于所有屏幕宽度.感谢2calledchaos的改进!一些基本样式在移动样式中定义,因此我们需要确保包含它们.

编辑:chris注意到您可以在bootstrap站点上的online less编译器中设置这些变量

Answer 2

这在官方Bootstrap 3发布文档中有解释:

禁用响应式视图的步骤

要禁用响应功能,请按照下列步骤操作.在下面的修改模板中查看它的实际操作.

1. 删除(或只是不添加)<meta>CSS文档中提到的视口
2. 使用max-width:none!important删除所有网格层的.container上的最大宽度; 并设置宽度的常规宽度:970px;.确保这是在默认的Bootstrap CSS之后.您可以选择使用媒体查询或某些selector-fu来避免使用!important.
3. 如果使用导航栏,请撤消所有导航栏折叠和展开行为(这在此处显示太多,因此请查看示例).
4. 对于网格布局,除了中/大类之外,还应使用.col-xs-*类.不用担心,超小型设备网格可以扩展到所有分辨率,因此您可以将其设置在那里.

你仍然需要针对IE8的Respond.js(因为我们的媒体查询仍在那里,需要被选中).这只是禁用Bootstrap的"移动站点".

另请参阅GetBootstrap.com/examples/non-responsive/上的示例

Answer 3

我最近才弄清楚让你的bootstrap v3.1.1没有响应是多么容易.这包括导航栏不要拼写.我不知道是否每个人都知道这一点,但我想分享一下.

无响应Bootsrap v3.1.1的两个步骤

首先,创建一个css文件名,将其命名为non-responsive.css.确保将其附加到您的主题或在引导程序css文件后立即链接.

其次,将此代码粘贴到您的非响应式CSS:

/* Template-specific stuff
 *
 * Customizations just for the template; these are not necessary for anything
 * with disabling the responsiveness.
 */

/* Account for fixed navbar */
body {
  min-width: 970px;
  padding-top: 70px;
  padding-bottom: 30px;
}

/* Finesse the page header spacing */
.page-header {
  margin-bottom: 30px;
}
.page-header .lead {
  margin-bottom: 10px;
}


/* Non-responsive overrides
 *
 * Utilitze the following CSS to disable the responsive-ness of the container,
 * grid system, and navbar.
 */

/* Reset the container */
.container {
  width: 970px;
  max-width: none !important;
}

/* Demonstrate the grids */
.col-xs-4 {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

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

这就是全部,享受.. ^^

来源: 来自getbootstrap.com示例的non-responsive.css.

Answer 4

来自:http://getbootstrap.com/getting-started/#disable-responsive

1. 省略<meta>CSS文档中提到的视口
2. 使用单个宽度覆盖每个网格层的widthon .container,例如,width: 970px !important;确保这是在默认的Bootstrap CSS之后.您可以选择避免!important使用媒体查询或某些选择器.
3. 如果使用导航栏,请删除所有导航栏折叠和展开行为.
4. 对于网格布局,请使用.col-xs-*除中型/大型之外或代替中型/大型的类.不用担心,超小设备网格可以扩展到所有分辨率.

Answer 5

我需要完全删除Bootstrap响应功能,最后我用以下代码覆盖了行为:

.container {
    width: 960px !important;
}

@media (min-width: 1px) {
  .container {
    max-width: 940px;
  }
  .col-lg-1,
  .col-lg-2,
[...]

完整片段:https://gist.github.com/ivanminutillo/8557293

Answer 6

您可以使用具有无响应功能的Bootstrap 3 CSS来实现

https://github.com/bassjobsen/non-responsive-tb3