Gridview 在 ipad 引导程序上未正确对齐答案

【问题标题】：Gridview not aligning properly on ipad bootstrapGridview 在 ipad 引导程序上未正确对齐
【发布时间】：2016-04-13 09:43:55
【问题描述】：

由于我是 bootstrap 新手，我开始制作网站：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 个一组？

【问题讨论】：

标签： html css twitter-bootstrap gridview

【解决方案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>

上面是我只使用了一行并且所有元素都在该行内的示例

【讨论】：

【解决方案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>

【讨论】：