Gridview ipad önyüklemede düzgün hizalamıyor

Question

Bootstrap için yeni olduğum için bir web sitesi yapmaya başladım: Website.

Bu web sitesini ipad'de görüntülediğinizde, evlerin hizalaması yanlış. Burada gördüğünüz gibi:

GRIDVIEW içeren kod:

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

nasıl ben yapabilirim buna birbirinden yanında hizalar böylece olup 3'lü gruplar halinde?

Answer 1

Siz düzende, içinde 3 eleman bulunan birden çok .row kullandınız.

Ama duyarlı bakış .row içinde

3 elemanları sonra bir ara tüm ekranlar

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

Üstü içinde idare edecek önyükleme tüm unsurları ile bir satır kullanmalısınız orada bu nedenle sayfa bölünmüş örnektir edilebilir hangi i yalnızca bir satır kullanmış ve tüm unsurları bu satırın içindedir

İkide yerine, tek satırda tüm sütunları koyabilirsiniz

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>