Gridview在ipad bootstrap上沒有正確對齊

Question

由於我是新手，我開始製作一個網站：Website。

現在，當你在ipad上查看這個網站時，房子的路線是錯誤的。正如你可以在這裏看到：

包含GridView中代碼：

<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> 

我如何使它所以它對準旁邊的海誓山盟，而不是在3組？

Answer 1

在您的佈局中，您使用了多個.row，其中包含3個元素。

但在響應視圖.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> 

以上所有元素是例子其中，我只用一排，所有的元素都是行內

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>