html - Gridview 在 ipad bootstrap 上没有正确对齐

标签 html css twitter-bootstrap gridview

因为我是 bootstrap 的新手，所以我开始制作一个网站:Website .

现在当你在 ipad 上查看这个网站时，房屋的排列是错误的。正如您在这里看到的:

Example

包含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 个一组？

最佳答案

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

但是在响应式 View 中 .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>

Above is the example in which i have used only one row and all the elements are inside that row

关于html - Gridview 在 ipad bootstrap 上没有正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36594532/

上一篇：css - 将 feFlood 过滤器应用于 <tspan> 未按预期工作

下一篇：css - 如何在标签上应用 css 边距

相关文章：

php - 500(服务不可用(带有消息))

javascript - 在手机上查看时隐藏边框

php - 解析带有格式化文本的 HTML

javascript - 突出显示表格中的行和列

javascript - 检查颜色是否为字符串 ('white' === color?//true, 'bright white gold' === color?//false)

css - 如何使用伪类在悬停时创建 mui 过渡？

html - 如何在容器中垂直居中行？

html - 如何将CSS属性传递给child的child？ (div级联)

HTML 在我的 Logo 旁边垂直居中文本？

css - 设置显示 :none not working for fa icon

©2024 IT工具网  联系我们