1

私は Bootstrap 3 を初めて使用します。グリッド システムに問題があります: http://getbootstrap.com/css/#grid。すべてが 992px 以下でうまく機能します。言い換えれば、<728 px 私の 2 つの div スタック、>728 px は水平です。ただし、992px を超えると再びスタックします。私の目的は、2 つの 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でも）。 ここで動作します画像 1 が動作します。

画面を広くすると、スタックが開始されます。

ここに画像の説明を入力

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 に答える