グリッドビューがipadブートストラップで正しく整列していない

Question

私はブートストラップに新しいので、私はウェブサイトを作成し始めました：Website。

今あなたがipadでこのウェブサイトを見るとき、家の整列は間違っています。あなたはここで見ることができるように：

GridViewコントロールを含むコードを：それは3のグループに次お互いになく揃えて

<div class="house-grid"> 
    <div class="container"> 
     <h2>Huizen</h2> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
       <div class="caption"> 
       <h3>Huis 1</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
       <div class="caption"> 
       <h3>Huis 2</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
       <div class="caption"> 
       <h3>Huis 3</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
     </div> 
       <div class="row"> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
       <div class="caption"> 
       <h3>Huis 1</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
       <div class="caption"> 
       <h3>Huis 2</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
       <div class="caption"> 
       <h3>Huis 3</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
     </div> 
    </div> 
</div> 

は、どのように私はそれを作るのですか？

Answer 1

レイアウトでは、内部に3つの要素を持つ複数の.rowを使用しています。

しかし、応答性の観点.rowで

は、3つの要素の後にブレークはあなたがすべての画面

 <div class="row"> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
       <div class="caption"> 
       <h3>Huis 1</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
       <div class="caption"> 
       <h3>Huis 2</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
       <div class="caption"> 
       <h3>Huis 3</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
       <div class="caption"> 
       <h3>Huis 1</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
       <div class="caption"> 
       <h3>Huis 2</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
      <div class="col-sm-6 col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
       <div class="caption"> 
       <h3>Huis 3</h3> 
       <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
       <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
       </div> 
      </div> 
      </div> 
     </div> 

の上でそれを処理するブートストラップすべての要素を1行を使用する必要がありますが、なぜthatsの分割例であることができますここで私は一列のみを使用している、すべての要素は、その行の内側にある

あなたが2ではなく、1行ですべての列を入れることができ

Answer 2

：

<div class="row"> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
     <div class="caption"> 
     <h3>Huis 1</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
     <div class="caption"> 
     <h3>Huis 2</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
     <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
     <div class="caption"> 
     <h3>Huis 3</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
     </div> 
    </div> 
    </div> 
<div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="images/BHM-02-12579_10A_516x258_jpg_472.jpg"> 
    <div class="caption"> 
     <h3>Huis 1</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
    </div> 
    </div> 
</div> 
<div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="images/fotos-oude-computer-4021-600x300.jpg"> 
    <div class="caption"> 
     <h3>Huis 2</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
    </div> 
    </div> 
</div> 
<div class="col-sm-6 col-md-4"> 
    <div class="thumbnail"> 
    <img src="images/HFN-02-13024_516x258_jpg_1910.jpg"> 
    <div class="caption"> 
     <h3>Huis 3</h3> 
     <p>Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.</p> 
     <p><a href="huis-pagina.php" class="btn btn-primary" role="button">Meer informatie</a></p><p><a style="background-color: #088A08;" href="contact.php" class="btn btn-primary" role="button">Neem contact op</a></p> 
    </div> 
    </div> 
</div> 
</div>