Question

嗨，请，有人可以解释为什么我的网格不直，为什么图像尺寸不一样吗？

我多次使用同一张图片。

谢谢

<div class="container">
  <div class="jumbotron">
  <h1>The Image Gallery</h1>
  <p>Images for real people </p>
  </div>

   <div class="row">
     <div class="col-lg-4  col-sm-6">
       <div class="thumbnail">
       <img src="http://i.imgur.com/qK42fUu.jpg">
       </div>
     </div>
      <div class="row">
     <div class="col-lg-4 col-sm-6">
       <div class="thumbnail">
       <img src="http://i.imgur.com/qK42fUu.jpg">
       </div>
     </div>
      <div class="row">
     <div class="col-lg-4 col-sm-6">
       <div class="thumbnail">
       <img src="http://i.imgur.com/qK42fUu.jpg">
       </div>
     </div>
      <div class="row">
     <div class="col-lg-4 col-sm-6">
       <div class="thumbnail">
       <img src="http://i.imgur.com/qK42fUu.jpg">
       </div>
     </div>
      <div class="row">
     <div class="col-lg-4 col-sm-6">
       <div class="thumbnail">
       <img src="http://i.imgur.com/qK42fUu.jpg">
       </div>
     </div>

Answer 1

正确设置格式后，您提供的HTML如下所示。请注意，您的.row元素都没有闭合标记。这意味着随后的每一行都嵌套在前一行之内，这导致了视觉上的不一致，因为每一行的边距都是复合的。

添加一些结束标记并正确设置HTML格式，那么您应该一切顺利。

<div class="row">
    <div class="col-lg-4  col-sm-6">
        <div class="thumbnail">
             <img src="http://i.imgur.com/qK42fUu.jpg">
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-sm-6">
            <div class="thumbnail">
                <img src="http://i.imgur.com/qK42fUu.jpg">
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <div class="thumbnail">
                    <img src="http://i.imgur.com/qK42fUu.jpg">
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-6">
                    <div class="thumbnail">
                        <img src="http://i.imgur.com/qK42fUu.jpg">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-4 col-sm-6">
                        <div class="thumbnail">
                            <img src="http://i.imgur.com/qK42fUu.jpg">
                        </div>
                    </div>

我的Bootstrap网格对齐不正确。图像显示为不同大小

1 个答案: