Html 无法用边框水平放置我的所有图片，其中一个一直被向下推_Html_Css_Twitter Bootstrap

Html 无法用边框水平放置我的所有图片，其中一个一直被向下推

html css twitter-bootstrap

Html 无法用边框水平放置我的所有图片，其中一个一直被向下推,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,所以我是个新手，遇到了间隔问题。我有4张图片，我想在一个小的边框和下面对齐的文本行。然而，当我改变任何边框或边距元素时，它会向下推我的最后一张图片，即使我已经调整了其他图片的宽度。我相信这和bootstrap中的专栏有关，但我太新了，无法理解发生了什么。任何帮助都将不胜感激！这是我的密码： <div class="container"> <div class="row"> <div>

所以我是个新手，遇到了间隔问题。我有4张图片，我想在一个小的边框和下面对齐的文本行。然而，当我改变任何边框或边距元素时，它会向下推我的最后一张图片，即使我已经调整了其他图片的宽度。我相信这和bootstrap中的专栏有关，但我太新了，无法理解发生了什么。任何帮助都将不胜感激！这是我的密码：

<div class="container">
            <div class="row">
                <div>
                    <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="https://www.goway.com/media/cache/fd/ac/fdaccd60e655c973c2b1855733512a02.jpg" alt=""><a href="#"><p class="caption">Visit South America!</p></a></div>
                    <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""><a href="#"><p class="caption">Visit Europe!</p></a></div>
                    <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="http://www.princess.com/images/learn/cruise-destinations/asia-cruises/southeast-asia/se-asia-unique-experiences.jpg" alt=""><a href="#"><p class="caption">Visit Asia!</p></a></div>
                    <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="http://news-events.sleeping-out.co.za/wp-content/uploads/2014/07/africa-sunset-wallpaper-1920x1200-379-kb.jpg" alt=""><a href="#"><p class="caption">Visit Africa!</p></a></div>
                </div>
            </div>
          </div>

如果我删除.img缩略边距，图片都会移到一行，但必须在它们之间加上边框，并且会被弄脏

还有，有没有人有什么技巧可以更好地搜索问题？我对编程非常陌生，我觉得为了找到解决方案，我甚至很难说出我想问的问题。谢谢大家

只需删除.row下面的div，并将img缩略图放在img标记中即可

  <div class="container">
        <div class="row">
            <div><!-- remove this div tag -->
                <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="https://www.goway.com/media/cache/fd/ac/fdaccd60e655c973c2b1855733512a02.jpg" alt=""><a href="#"><p class="caption">Visit South America!</p></a></div>
                <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""><a href="#"><p class="caption">Visit Europe!</p></a></div>
                <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="http://www.princess.com/images/learn/cruise-destinations/asia-cruises/southeast-asia/se-asia-unique-experiences.jpg" alt=""><a href="#"><p class="caption">Visit Asia!</p></a></div>
                <div class="col-sm-3 img-thumbnail"><img class="bottombanner" src="http://news-events.sleeping-out.co.za/wp-content/uploads/2014/07/africa-sunset-wallpaper-1920x1200-379-kb.jpg" alt=""><a href="#"><p class="caption">Visit Africa!</p></a></div>
            </div><!-- remove this div tag -->
        </div>
      </div>

最终结果如下：

   <div class="container">
        <div class="row"> 
                <div class="col-sm-3"><img class=" img-thumbnail bottombanner" src="https://www.goway.com/media/cache/fd/ac/fdaccd60e655c973c2b1855733512a02.jpg" alt=""><a href="#"><p class="caption">Visit South America!</p></a></div>
                <div class="col-sm-3"><img class=" img-thumbnail bottombanner" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""><a href="#"><p class="caption">Visit Europe!</p></a></div>
                <div class="col-sm-3"><img class=" img-thumbnail bottombanner" src="http://www.princess.com/images/learn/cruise-destinations/asia-cruises/southeast-asia/se-asia-unique-experiences.jpg" alt=""><a href="#"><p class="caption">Visit Asia!</p></a></div>
                <div class="col-sm-3"><img class=" img-thumbnail bottombanner" src="http://news-events.sleeping-out.co.za/wp-content/uploads/2014/07/africa-sunset-wallpaper-1920x1200-379-kb.jpg" alt=""><a href="#"><p class="caption">Visit Africa!</p></a></div> 
        </div>
      </div>

我想出的解决方案是将图像移动到自己的div中，如下所示：

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="img-thumbnail"><img class="bottombanner" src="https://www.goway.com/media/cache/fd/ac/fdaccd60e655c973c2b1855733512a02.jpg" alt="">
    <a href="#">
      <p class="caption">Visit South America!</p>
    </a>
  </div>
</div>
<div class="col-sm-3">
  <div class="img-thumbnail"><img class="bottombanner" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt="">
    <a href="#">
      <p class="caption">Visit Europe!</p>
    </a>
  </div>
</div>
<div class="col-sm-3">
  <div class="img-thumbnail"><img class="bottombanner" src="http://www.princess.com/images/learn/cruise-destinations/asia-cruises/southeast-asia/se-asia-unique-experiences.jpg" alt="">
    <a href="#">
      <p class="caption">Visit Asia!</p>
    </a>
  </div>
</div>
<div class="col-sm-3">
  <div class="img-thumbnail"><img class="bottombanner" src="http://news-events.sleeping-out.co.za/wp-content/uploads/2014/07/africa-sunset-wallpaper-1920x1200-379-kb.jpg" alt="">
    <a href="#">
      <p class="caption">Visit Africa!</p>
    </a>
  </div>
</div>

这种方法将图像与列（名为“col-sm-3”的类）分离。这样，图像现在可以“填充”列

这是一个工作。

您在

上添加的margin属性。img thumbnail

会干扰同一行中的列。这是因为引导应用于其列和行的
框大小：边框框
属性不计算框的边距，而只计算填充、边框和内容。所以你有以下解决这个问题的方法-

只需从
.img缩略图中删除边距：1px 或
如图所示，覆盖.col-sm-3 的默认宽度 i、 e 这应该能解决你的问题。您可以将2px更改为任意值您的边框是2倍（边框宽度*2）
如果要保持上的边距：1px 在上，您可以将宽度在上重置为自动下面带有CSS和bootsrap3库的代码段需要使用！重要信息 .img-thumbnail { margin: 1px; width: auto!important; /* reset added */ } .bottombanner{ 宽度：248px；保证金：5px；填充物：5px；高度：150像素；显示：内联块； } .标题{ 文本对齐：居中；背景:#666；字体大小：粗体；颜色：白色；最大宽度：100%；保证金：0px 14px 0px 10px；边界半径：5px； } .img缩略图{ 保证金：1px；宽度：自动！重要；/*已添加重置*/ } 我想这可能会对您有所帮助，我使用引导更新了您的代码班级， .缩略图像 { 宽度：100%；高度：180px！重要； } .底部文本{ 文本对齐：居中；背景：#000！重要；字体大小：粗体；颜色：白色；最大宽度：100%；页边顶部：1px； /*保证金：0px 14px 0px 10px*/ } .底部文本a { 颜色：#fff； } .底部文本a：悬停 { 颜色：#eee；文字装饰：无； } 嘿，非常感谢，这真是太棒了！你知道为什么它以前不起作用的原因吗？很难解释，但我会试试——这些列有一个精确的设定宽度将图像和列混合在一起并添加1px的边距会导致溢出/换行效果，因为现在列对于其容器来说太宽了。现在将图像放在divs中意味着图像将扩展到列的内部尺寸（而不是列的外部尺寸）的宽度。检查答案可能会对您有所帮助。。！！谢谢，这真的很有帮助，我更喜欢你的第二个解决方案的外观！长方体阴影的四个值是什么？我会假设是从左上到右，但是边界阴影会一直存在，所以我不确定，为什么要列出两次，用逗号分隔？@jl7897逗号可以让您添加所需的阴影。第一个是白色的，以伪造1px的边距，第二个（2px）是黑色的，部分隐藏在第一个阴影中，请参见：有关正确的英语解释；） .col-sm-3 { width: calc(25% - 2px) !important; } .img-thumbnail { margin: 1px; width: auto!important; /* reset added */ } i think this may help for you , i updated your code by using the bootstrap classes, <style> .thumbnail img { width: 100%; height: 180px !important; } .bottom-text { text-align: center; background: #000 !important; font-weight: bold; color: white; max-width: 100%; margin-top: 1px; /*margin: 0px 14px 0px 10px;*/ } .bottom-text a { color: #fff; } .bottom-text a:hover { color: #eee; text-decoration: none; } </style> <div class="container"> <div class="row"> <div> <div class="col-md-3 col-sm-3 "> <div class="thumbnail"> <img class="bottombanner" src="https://www.goway.com/media/cache/fd/ac/fdaccd60e655c973c2b1855733512a02.jpg" alt=""> <div class="caption bottom-text"> <a href="#">Visit South America!</a> </div> </div> </div> <div class="col-md-3 col-sm-3 "> <div class="thumbnail"> <img class="bottombanner" src="https://i.gocollette.com/img/destination-page/europe/europe-continent/europe-ms2.jpg?h=720&w=1280&la=en" alt=""> <div class="caption bottom-text"> <a href="#">Visit Europe!</a> </div> </div> </div> <div class="col-md-3 col-sm-3 "> <div class="thumbnail"> <img class="bottombanner" src="http://www.princess.com/images/learn/cruise-destinations/asia-cruises/southeast-asia/se-asia-unique-experiences.jpg" alt=""> <div class="caption bottom-text"> <a href="#">Visit Asia!</a> </div> </div> </div> <div class="col-md-3 col-sm-3 "> <div class="thumbnail"> <img class="bottombanner" src="http://news-events.sleeping-out.co.za/wp-content/uploads/2014/07/africa-sunset-wallpaper-1920x1200-379-kb.jpg" alt=""> <div class="caption bottom-text"> <a href="#">Visit Africa!</a> </div> </div> </div> </div> </div> </div>