Question

由于我是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组中？

Answer 1

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

但是在响应式视图中.row可以被拆分，这就是为什么在3个元素之后有一个中断你应该使用一行所有元素bootstrap将在所有屏幕中处理它

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

Gridview在ipad引导程序上没有正确对齐

2 个答案: