如何删除Twitter Bootstrap 3中的响应function？
自Bootstrap 3以来，不再需要响应式和标准样式表的独立文件。 那么如何轻松删除响应function呢？
要取消激活非桌面样式，您只需在variables.less文件中更改4行代码即可。 像这样设置variables.less文件中的屏幕宽度断点：
//媒体查询断点 // ------------------------------------------------ - //额外的小屏幕/手机 //注意：自v3.0.1起弃用@ screen-xs和@ screen-phone @ screen-xs：1px; @ screen-xs-min：@ screen-xs; @ screen-phone：@ screen-xs-min; //小屏幕/平板电脑 //注意：自v3.0.1起弃用@ screen-sm和@ screen-tablet @ screen-sm：2px; @ screen-sm-min：@ screen-sm; @ screen-tablet：@ screen-sm-min; //中等屏幕/桌面 //注意：自v3.0.1起弃用@ screen-md和@ screen-desktop @ screen-md：3px; @ screen-md-min：@ screen-md; @ screen-desktop：@ screen-md-min; //大屏幕/宽大的桌面 //注意：从v3.0.1开始，弃用@ screen-lg和@ screen-lg-desktop @ screen-lg：9999px; @ screen-lg-min：@ screen-lg; @ screen-lg-desktop：@ screen-lg-min;
这会将桌面样式媒体查询的最小宽度设置得更低，以适用于所有屏幕宽度。 感谢2calledchaos的改善！ 一些基本样式是在移动样式中定义的，所以我们需要确保包含它们。
编辑：克里斯指出，你可以设置这些variables在引导站点在线less编译器
这在官方的Bootstrap 3发行版文档中有解释：
禁用响应式视图的步骤
要禁用响应function，请按照下列步骤操作。 在下面的修改模板中看到它的实际操作。
- 移除（或者不添加）CSS文档中提到的视口
<meta>- 使用max-width：none！重要;删除.container上所有网格层的最大宽度。 并设置一个像宽度为970px的常规宽度。 确保这是在默认的Bootstrap CSS之后。 您可以select避免重要的媒体查询或一些select福。
- 如果使用导航栏，请撤消所有的导航栏折叠和展开行为（这里显示的太多了，所以偷看示例）。
- 对于网格布局，除了使用.col-xs- *类以外，还可以使用.col-xs- *类。 别担心，超小型设备网格可以扩展到所有分辨率，所以你就可以在这里设置。
你仍然需要IE8的Respond.js（因为我们的媒体查询仍然存在，需要拿起）。 这只是禁用Bootstrap的“移动网站”。
另请参阅GetBootstrap.com/examples/non-responsive/上的示例
我只是最近搞清楚了，让你的bootstrap v3.1.1没有响应是多么容易。 这包括navbars不collpase。 我不知道大家是否知道这个，但我想分享一下。
两步到一个无响应的Bootsrap v3.1.1
首先，创build一个css文件名称为non-responsive.css。 请确保将其附加到您的主题或引导后的CSS文件链接。
其次，将此代码粘贴到您的非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; }
这一切，享受.. ^^
来源： getbootstrap.com示例中的 non-responsive.css 。
我需要彻底删除引导响应function，我结束了以下代码片段覆盖行为：
.container { width: 960px !important; } @media (min-width: 1px) { .container { max-width: 940px; } .col-lg-1, .col-lg-2, [...]
完整摘录： https ： //gist.github.com/ivanminutillo/8557293
来自： http : //getbootstrap.com/getting-started/#disable-responsive
- 省略CSS文档中提到的视口
<meta> - 使用单一宽度覆盖每个网格层的
.container上的宽度，例如width: 970px !important;确保这是在默认的Bootstrap CSS之后。 您可以select避免!important的媒体查询或一些select福。 - 如果使用导航栏，请删除所有导航栏折叠和展开行为。
- 对于网格布局，使用
.col-xs-*类除了或者代替中型/大型。 别担心，超小型设备网格可以扩展到所有分辨率。
你可以通过使用带有无响应function的Bootstrap 3 CSS来做到这一点
如果你想要一个固定大小的网站，这应该是相当简单的：
// 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: 1;
看看www.goo.gl/2SIOJj这是一个正在进行的工作，但它可能会帮助你。
我使用cookie来定义，如果我想桌面或响应版本。 在页面的页脚中，您可以find两个跨度，general.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`
我结束了所有我的自定义CSS分成两个文件我不使用引导程序导航，但我自己的，这是我的自定义样式的大部分，所以它不会解决你的整个问题，但它适用于我
而且我还创build了非response.css，强制网格维持大屏幕版本
如果你select手机我会加载/回声
<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" />
如果你select桌面我会加载/回声
<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" />
non-responsive.css是一个覆盖bootstrap我关心的是布局，所以没有太多的内容，因为我处理导航以我自己的方式如此CSS和其他位在我的其他CSS文件
请注意，即使在桌面浏览器上，我的设置的行为也与桌面一样，不像其他一些我看到的解决scheme，它只会忽略似乎只在移动设备上支持的视口
