1

我对 Bootstrap 3 很陌生。我遇到了网格系统的问题：http: //getbootstrap.com/css/#grid。一切都在 992px 以下。换句话说，<728 px 我的两个 div 堆栈，>728 px 它们是水平的。但是，在 992 像素以上，它们会再次堆叠。我的目标是我的两个 div 仅用于“超小型设备电话（<768px）”。不适用于更大的屏幕。

这是我的 html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Testing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class ="container">
        <div class ="row">
            <div class ="col-sm-6">
            <img src="http://placehold.it/500x500.png" class="img-responsive">
            </div>
            <div class ="col-sm-6">
            <img src="http://placehold.it/500x500.png" class="img-responsive">
            </div>
        </div>
    </div>

  <!-- JavaScript plugins (requires jQuery) -->
    <script src="http://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
    <script src="js/respond.js"></script>
  </body>
</html>

编辑：

请看一下图片。它对我不起作用（无论是在 FF 还是在 Chrome 中）。 在这里有效图一有效。

使屏幕更宽，它开始堆叠：

在此处输入图像描述

4

1 回答 1

2

Add classes below to each of your blocks, that have to be stacked one under another in small version.

col-lg-6 col-sm-12

col-lg-6 says: Make block 50% width in LG and smaller dimensions

col-sm-12 says: Make block 100% width in SM and smaller dimensions

Zoom. It's expected behavior. Zoom would change your page_width/element_width ratio. So you will get other breakpoint usually after zooming.

于 2014-02-12T12:55:19.967 回答