Bootstrap：如何使网站始终以“lg”方式运行

Question

我有一个完全响应的网站，其中 hidden-*、visible-* 类正在被广泛使用，现在我想让移动用户能够使用该网站的桌面版本，如果他们点击类似的按钮“桌面网站”。

这些是 Disabling Responsiveness 的引导文档：

1. 省略 CSS 文档中提到的视口。
2. 使用 .container 覆盖每个网格层的宽度 单一宽度，例如 width: 970px !important;确保这 出现在默认的 Bootstrap CSS 之后。您可以选择避免 !对媒体查询或某些选择器很重要。
3. 如果使用导航栏，请删除所有导航栏折叠和展开 行为。
4. 对于网格布局，使用 .col-xs-* 类作为补充或就地 的，中/大的。别担心，超小的设备网格 扩展到所有分辨率。

我试过了，还是不行！

Media Queries 仍在运行。

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

所以什么也没发生，responsiveness 仍在运行！

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

提前致谢。

Answer 1

也许对您来说最好的方法是编译一个单独的 Boostrap 版本，而不需要任何响应式好处。检查此blog 条目以了解如何执行此操作。让我知道这是否有帮助/有效。 法比奥

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*，这是在您的元素的类中定义的。除非您想编写一个脚本来将每个 .col-* 替换为 .col-xs，否则您必须手动更改它们。