Bootstrap 没有为移动设备格式化答案

【问题标题】：Bootstrap not formatting for mobileBootstrap 没有为移动设备格式化
【发布时间】：2014-10-16 01:32:32
【问题描述】：

所以我正在尝试自学如何使用引导程序，但由于某种原因，在移动设备上显示时，我无法让网站正确格式化。调整浏览器大小时网站格式正确，但在模拟移动设备时则不正确。

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link  href="bootstrap.min.css" rel="stylesheet" >

</head>

<body>

<div class="container-fluid">
<h1>HERE IS WHERE THE CONTAINER IS. </h1>
<div class="row-fluid">

<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum leo ut posuere suscipit. Suspendisse sed ex venenatis, tempus quam sit amet, porta sapien. Maecenas in nibh leo. In elementum eleifend odio, id pellentesque justo. Cras vitae placerat mauris. Aliquam erat volutpat. Integer faucibus eget nulla eget mollis. Pellentesque interdum vitae purus ut venenatis. Fusce hendrerit ultricies dignissim.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->

<div class="col-lg-4 col-md-4 col-sm-4">
<h2>Paragraph 2</h2>
<p>Duis elementum quam sit amet ante imperdiet, id bibendum nunc finibus. Donec et semper quam, et tempus tellus. Nullam quis nisl eu sem sodales consectetur. Donec ornare urna elit, in euismod leo feugiat eget. In eu placerat tellus. Nullam et tristique purus. Sed ut accumsan ipsum, nec semper mauris.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->

<div class="col-lg-4 col-md-4 col-sm-4">

<h2>Paragraph 3</h2>
<p>Mauris euismod massa a gravida posuere. Etiam placerat euismod est. Nam sed scelerisque elit. Mauris id ultrices enim. Nulla eu justo eget tellus vestibulum lacinia non eu augue. Maecenas porta purus vitae vehicula mattis. Nam auctor euismod ornare. Morbi eleifend luctus varius. Sed non nisl porta, vehicula elit sed, rhoncus felis. Aliquam ac elementum nunc. Integer blandit porta nisi, et venenatis nibh. Donec velit lorem, aliquet vel lorem in, efficitur tempus leo. Nulla facilisi. Nam vel malesuada mauris. Vivamus leo libero, finibus ut justo eget, tristique lobortis lectus. Etiam luctus urna eget leo lobortis blandit.</p>
</div><!--col-lg-4 col-md-4 col-sm-4-->


</div><!--row-->
</div><!--container-->

</body>
</html>

我一直无法弄清楚为什么会这样。任何帮助，将不胜感激。

【问题讨论】：

.row-fluid 在 Bootstrap 3 中不存在。使用 .row。当你使用 .container-fluid 时，它在 Bootstrap 中都是流畅的。此外，您只需要 col-sm-4 而不是其他人。除此之外，这看起来很好，并且会堆叠在 col-sm-min-width 之下（任何低于 768px 的东西都会在这个设置下堆叠）。
我进行了建议的更改，但它仍然无法在移动设备上正确模拟。模拟 iphone 4 时没有调整大小。它只是有滚动条，仍然有三列。
在 iphone 和所有其他小型设备上都可以。模拟器可能有问题。您的视口元标记包含在您正在查看的实际内容中吗？ jsbin.com/tijen/1/edit
是的，我愿意。但是，如果它对您有用，那么我同意我的模拟器存在问题。感谢您的帮助！
您可以免费获得 30 分钟。使用 BrowserStack，我认为 CrossBrowserTesting.com。检查真实设备总是好的，但它们在紧要关头也很好。我每个月要花大约 50 美元来访问 IE，因为我不想再买一台电脑。

标签： html css twitter-bootstrap mobile responsive-design

【解决方案1】：

您似乎在此处使用 Bootstrap 2，请查看此tutorial，了解如何将 Bootstrap 3 配置为在移动设备上运行。

【讨论】：

不，他或她从 2 中使用的唯一东西是 .row-fluid，其余的是 Bootstrap 3。