Bootstrap: 如何让网站一直运行在"lg"

Question

我有一个完全响应式的网站，类 hidden-*, visible-* 被广泛使用，现在我想让移动用户能够使用桌面版本如果他们点击像 "Desktop Website".

这样的按钮

这些是 Bootstrap Disabling Responsiveness 的文档：

省略 CSS 文档中提到的视口。
为每个网格层覆盖 .container 上的宽度单一宽度，例如 width: 970px !important;确保这在默认 Bootstrap CSS 之后。您可以选择避免 !important 媒体查询或一些选择器-fu。
如果使用导航栏，移除所有折叠和展开的导航栏行为。
对于网格布局，使用 .col-xs-* 类作为补充或代替其中，medium/large 个。别担心，超小的设备网格缩放到所有分辨率。

我试过了，但没用！

Media Queries 仍在运行。

hidden-* 和 visible-* 仍在运行。

所以什么都没发生，responsiveness 还在运行！

我不知道为什么这是一件困难的事情。该网站已经在桌面设备上配置为运行，所以我只需要告诉 Mobile 或 Tablet 像 Desktop 一样浏览该网站。有什么办法吗？

提前致谢。

Answer 1

也许对您来说最好的方法是编译一个单独的 Boostrap 版本，而不使用它的任何响应式好东西。检查此 blog 条目以了解如何执行此操作。如果 helped/worked，请告诉我。法比奥

Answer 2

在没有确切了解您的 CSS 是如何设置的情况下，我建议您查看 this page 作为文档的一部分。

以下是该示例中某些无响应 CSS 的工作方式..

/* Non-responsive overrides
 *
 * Utilize 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;
  visibility: 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;
}

/* Undo form expansion */
.navbar-form {
  float: left;
  width: auto;
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  border: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}

/* Copy-pasted from forms.less since we mixin the .form-inline styles. */
.navbar-form .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

.navbar-form .form-control-static {
  display: inline-block;
}

.navbar-form .input-group {
  display: inline-table;
  vertical-align: middle;
}

.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
  width: auto;
}

.navbar-form .input-group > .form-control {
  width: 100%;
}

.navbar-form .control-label {
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .radio,
.navbar-form .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle;
}

.navbar-form .radio label,
.navbar-form .checkbox label {
  padding-left: 0;
}

.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
  position: relative;
  margin-left: 0;
}

.navbar-form .has-feedback .form-control-feedback {
  top: 0;
}

如果您询问如何始终使用 .col-xs*，这是在您的元素的 class 上定义的。除非您想编写脚本将每个 .col-* 替换为 .col-xs，否则您必须手动更改它们。

Bootstrap: 如何让网站一直运行在"lg"

Bootstrap: how to Make the website always operate as "lg"

css

twitter-bootstrap

media-queries