twitter-bootstrap 如何删除 Twitter Bootstrap 3 中的响应式功能？

Question

提问by kanarifugl

Since Bootstrap 3 there's no longer seperate files for responsive and standard stylesheets. So how can I easily remove the responsive features?

自 Bootstrap 3 起，响应式样式表和标准样式表不再有单独的文件。那么如何轻松删除响应式功能呢？

Answer 1

回答by Jay Douglass

To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:

要停用非桌面样式，您只需更改 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;

This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.

这将桌面样式媒体查询上的 min-width 设置得较低，以便它适用于所有屏幕宽度。感谢 2callchaos 的改进！移动样式中定义了一些基本样式，因此我们需要确保包含它们。

Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site

编辑：克里斯指出，您可以在引导站点上的在线较少编译器中设置这些变量

Answer 2

回答by lborgav

This is explained in the official Bootstrap 3 release docs:

这在官方 Bootstrap 3 发布文档中进行了解释：

Steps to disable responsive views
To disable responsive features, follow these steps. See it in action in the modified template below.
Remove (or just don't add) the viewport <meta>mentioned in the CSS docs
Remove the max-width on the .container for all grid tiers with max-width: none !important; and set a regular width like width: 970px;. Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, undo all the navbar collapsing and expanding behavior (this is too much to show here, so peep the example).
For grid layouts, make use of .col-xs-* classes in addition to or in place of the medium/large ones. Don't worry, the extra-small device grid scales up to all resolutions, so you're set there.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be picked up). This just disables the "mobile site" of Bootstrap.

禁用响应式视图的步骤
要禁用响应式功能，请按照以下步骤操作。在下面修改后的模板中查看它的实际效果。
删除（或只是不添加）<meta>CSS 文档中提到的视口
为所有具有 max-width: none !important; 的网格层删除 .container 上的 max-width 并设置一个常规宽度，如 width: 970px;。确保这是在默认 Bootstrap CSS 之后。您可以选择避免使用媒体查询或某些选择器功能的 !important。
如果使用导航栏，请撤消所有导航栏的折叠和展开行为（此处无法显示太多内容，请查看示例）。
对于网格布局，除了中/大类之外，还可以使用 .col-xs-* 类。不用担心，超小型设备网格可扩展到所有分辨率，因此您可以在那里进行设置。
您仍然需要用于 IE8 的 Respond.js（因为我们的媒体查询仍然存在并且需要被接收）。这只是禁用了 Bootstrap 的“移动站点”。

See also the example on GetBootstrap.com/examples/non-responsive/

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

Answer 3

回答by JiNexus

I just figure it out lately on how easy it is to make your bootstrap v3.1.1 being non-responsive. This includes navbars to not to collpase. I don't know if everyone knows this but I'd like to share it.

我最近才弄清楚让引导程序 v3.1.1 无响应是多么容易。这包括不折叠的导航栏。不知道大家是否知道，但我想分享一下。

Two Steps to a Non-responsive Bootsrap v3.1.1

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

First, create a css file name it as non-responsive.css. Make sure to append it to your themes or link right after the bootstrap css files.

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

Second, paste this code to your non-responsive.css:

其次，将此代码粘贴到您的 non-responsive.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;
}

That's all and Enjoy..^^

就是这样，享受吧..^^

Source:non-responsive.cssfrom the example at getbootstrap.com.

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

Answer 4

回答by Sophy

Source from: http://getbootstrap.com/getting-started/#disable-responsive

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

Omit the viewport <meta>mentioned in the CSS docs
Override the widthon the .containerfor each grid tier with a single width, for example width: 970px !important;Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !importantwith media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-*classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

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

Answer 5

回答by Ivan Minutillo

I needed to completely remove the Bootstrap responsive feature, i ended up overriding the behavior with the following snippet:

我需要完全删除 Bootstrap 响应功能，我最终使用以下代码段覆盖了该行为：

.container {
    width: 960px !important;
}

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

Full snippet: https://gist.github.com/ivanminutillo/8557293

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

Answer 6

回答by ?s??? ????

You can do that by using the Bootstrap 3 CSS with non-responsive features

您可以通过使用具有无响应功能的 Bootstrap 3 CSS 来做到这一点

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

Answer 7

回答by Hrvoje Golcic

If you want a fixed size website this should be fairly simple:

如果你想要一个固定大小的网站，这应该相当简单：

// Override container sizes
@container-sm: 700px;
@container-md: 700px;
@container-lg: 700px;

// Fixate media queries to tablet view only (lower viewports set to 0px, desired one to 1px, and the higher to ~9999px)

@screen-xs-min: 0px;
@screen-sm-min: 1px;
@screen-md-min: 9999px;
@screen-lg-min: 9999px;

// Disable responsive features such as navbar-collapse
@grid-float-breakpoint: 9999px;

Unless you are using .container-fluid, then also add:

除非您使用 .container-fluid，否则还要添加：

.container-fluid {
    width: 700px;
}
body {
    width: 700px + @general-min-width;
}

Answer 8

回答by tomhre

Look at www.goo.gl/2SIOJjit is a work in progress but it may help you.

看看www.goo.gl/2SIOJj这是一项正在进行的工作，但它可能会帮助你。

I use cookie to define if i want desktop or responsive version. In the footer of the page you can find two spans and in general.js is the script to handle the clicks.

我使用 cookie 来定义我想要桌面版还是响应式版本。在页面的页脚中，您可以找到两个跨度，一般来说.js 是处理点击的脚本。

        <div class="col-xs-6" style="text-align:center;"><span class="make_desktop">Desktop</span></div>
        <div class="col-xs-6" style="text-align:center;"><span class="make_responsive">Mobile</span></div>

function setMobDeskCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value + "; path=/";
    window.location.reload();
}

$(function() {
    $(".make_desktop").click(function() {
        setMobDeskCookie('deskmob', 1, 3650);
    });
    $(".make_responsive").click(function() {
        setMobDeskCookie('deskmob', 0, 3650);
    });
});`enter code here`

i ended up splitting all my custom css into two files i don't use bootstrap navigation but my own so that is majority of my custom styles, so it will not resolve your entire problem but it works for me

我最终将所有自定义 css 拆分为两个文件，我不使用引导程序导航，而是我自己的，因此这是我的大部分自定义样式，因此它不会解决您的整个问题，但对我有用

and i also created non-responsive.css that forces the grid to maintain the large screen version

我还创建了 non-responsive.css 强制网格保持大屏幕版本

in case u select mobile i would load / echo

如果你选择手机，我会加载/回声

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">  
<!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

and load these stylesheets
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style-responsive.css?modified=1402758346" />

in case you select desktop i would load /echo

如果您选择桌面，我会加载 /echo

<meta name="viewport" content="width=1024">    


        <!-- Bootstrap core CSS and JS -->
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <link href="/themes/responsive_lime/bootstrap-3_1_1/css/bootstrap.css" rel="stylesheet">
        <script src="/themes/responsive_lime/bootstrap-3_1_1/js/bootstrap.min.js"></script>

        <!-- Main CSS -->
        <link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/style.css?modified=14-06-2014-12-27-40" />
<link rel="stylesheet" type="text/css" media="screen,print" href="/themes/responsive_lime/css/non-responsive.css?modified=1402758635" />

the non-responsive.css is the one that has overrides for bootstrap my concern is layout so there is not much in there, given that i handle the navigation in my own way so css for it and the other bits is in my other css files

non-responsive.css 是覆盖引导程序的那个，我关心的是布局，所以那里没有太多，因为我以自己的方式处理导航，所以它的 css 和其他位在我的其他 css 文件中

please note that my setup does behave as desktop even on desktop browsers unlike some other solutions i have seen that will only ignore the viewport that seems to have wotked only on mobile devices for me

请注意，即使在桌面浏览器上，我的设置也确实像桌面一样运行

twitter-bootstrap 如何删除 Twitter Bootstrap 3 中的响应式功能？

提问by kanarifugl

回答by Jay Douglass

回答by lborgav

Steps to disable responsive views

禁用响应式视图的步骤

回答by JiNexus

回答by Sophy

回答by Ivan Minutillo

回答by ?s??? ????

回答by Hrvoje Golcic

回答by tomhre

相关推荐

最近更新

标签

twitter-bootstrap 如何删除 Twitter Bootstrap 3 中的响应式功能？

提问by kanarifugl

回答by Jay Douglass

回答by lborgav

Steps to disable responsive views

禁用响应式视图的步骤

回答by JiNexus

回答by Sophy

回答by Ivan Minutillo

回答by ?s??? ????

回答by Hrvoje Golcic

回答by tomhre

相关推荐

twitter-bootstrap Bootstrap Datepicker 无法设置开始/结束日期

twitter-bootstrap 用于放置日期选择器的引导程序日期选择器方向语法

twitter-bootstrap 引导继承

twitter-bootstrap 如何使包含图像的 div 响应

相关推荐

最近更新

标签