仅在移动设备上启用bootstrap响应

Question

我一直在寻找并找不到解决此问题的答案或解决方案：

我想只在用户使用移动设备时才启用bootstrap响应。换句话说，当用户使用计算机浏览器时，响应将被关闭，这意味着无论用户如何调整窗口大小，我的容器总是有最小宽度，响应性永远不会开始。

默认情况下有没有办法做到这一点？

Answer 1

我们需要添加一个额外的响应式样式表css / bootstrap-responsive.css

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

以下是支持的设备

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

响应式实用程序类

Answer 2

使用引导程序3：只需将一个新类添加到您的容器中，例如cFixed，并且仅在“最小宽度：768像素”媒体查询中设置容器尺寸即可！

@media (min-width: 768px) {
    .cFixed{width:1174px}
}

Answer 3

您可以将响应式和非响应式样式与CSS中的设备宽度分开。

cd ~/dev/test
git clone git@github.com:myUsername/myRepo.git .
cat helloWorld.txt

注意，这不能确定设备是否可移动。为此，您可以使用开源JavaScript（即http://detectmobilebrowsers.com/）。