无法使用边框水平放置我的所有照片，一个人不断被推倒

时间：2017-07-12 05:23:29

标签： html css twitter-bootstrap

所以我很新，遇到了间距问题。我有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>

这是我的CSS代码：

.bottombanner {
width: 248px;
margin: 5px;
padding: 5px;
height: 150px;
display: inline-block;
}

.caption {
text-align: center;
background: #666;
font-weight: bold;
color: white;
max-width: 100%;
margin: 0px 14px 0px 10px;
border-radius: 5px;
}

.img-thumbnail {
margin: 1px;
}

如果我删除了.img-thumbnail边距，那么这些图片都会转到一行，但必须在它们之间进行边框处理并且会被刷掉！

此外，有没有人有更好的搜索问题的提示？我对编程非常陌生，我觉得我很难写出我想要问的内容以便找到解决方案。谢谢你们！

5 个答案:

答案 0 :(得分：0)

只需删除.row下方的div，然后将img-thumbnail放在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>

答案 1 :(得分：0)

我提出的解决方案是将图像移动到他们自己的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>

这种方法将图像与列分离（标题为＆＃39; col-sm-3＆＃39;的类）。通过这种方式，图像现在可以填充＆＃34;列。

这是一个有效的pen。

答案 2 :(得分：0)

您在.img-thumbnail上添加的保证金属性会干扰同一行中的列。 这是因为引导程序应用于列和行的box-sizing: border-box属性并不计算框的边距，而只是 paddding ，边框和内容。 所以你有以下解决方案来解决这个问题 -

  1. 只需从margin: 1px移除.img-thumbnail。

    或

  2. 如图所示，覆盖.col-sm-3的默认宽度。

    3. 即

    .col-sm-3 {
    width: calc(25% - 2px) !important;
}
      

    这应该可以解决您的问题。您可以将2px更改为任何内容   你的边框是2 （边框宽度* 2）。

答案 3 :(得分：0)

如果您希望将width保留在.img-thumbnail，则可以将auto上的margin:1px重置为.img-thumbnail。

下面使用CSS和bootsrap3库的

小部件需要使用!important。

.img-thumbnail {
  margin: 1px;
  width: auto!important;   /* reset added */
}

＆＃13;
＆＃13; 
.bottombanner {
  width: 248px;
  margin: 5px;
  padding: 5px;
  height: 150px;
  display: inline-block;
}

.caption {
  text-align: center;
  background: #666;
  font-weight: bold;
  color: white;
  max-width: 100%;
  margin: 0px 14px 0px 10px;
  border-radius: 5px;
}

.img-thumbnail {
  margin: 1px;
  width: auto!important;   /* reset added */
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
＆＃13;
＆＃13;
＆＃13;

注意：最好是避免使用!important规则并在CSS文件中搜索以前要覆盖的规则。这里的边距：1px每个盒子的宽度至少增加2px ...推倒最后一个。

另一种方法可能是伪造1px边距通过插入阴影绘制边框： 见：https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

  

box-shadow CSS属性将一个或多个阴影效果描述为以逗号分隔的列表。

.img-thumbnail {
  /* margin: 1px; removed */
    border:none;/* remove borders */
  box-shadow:inset 0 0 0 1px white, inset 0 0 0 2px gray;/* fake borders */
}

＆＃13;
＆＃13; 
.bottombanner {
  width: 248px;
  margin: 5px;
  padding: 5px;
  height: 150px;
  display: inline-block;
}

.caption {
  text-align: center;
  background: #666;
  font-weight: bold;
  color: white;
  max-width: 100%;
  margin: 0px 14px 0px 10px;
  border-radius: 5px;
}

.img-thumbnail {
  /* margin: 1px; removed */
    border:none;/* remove borders */
  box-shadow:inset 0 0 0 1px white, inset 0 0 0 2px gray;/* fake borders */
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
＆＃13;
＆＃13;
＆＃13;

第3个选项是使用boostrap4并添加flex类

 <div class="row">
        <div class="d-flex"><!-- boostrap class that uses the flexmodel -->
          <div class="col-sm-3 img-thumbnail">

＆＃13;
＆＃13; 
.bottombanner {
  width: 248px;
  margin: 5px;
  padding: 5px;
  height: 150px;
  display: inline-block;
}

.caption {
  text-align: center;
  background: #666;
  font-weight: bold;
  color: white;
  max-width: 100%;
  margin: 0px 14px 0px 10px;
  border-radius: 5px;
}

.img-thumbnail {
  margin: 1px;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="d-flex"><!-- boostrap class that uses the flexmodel -->
      <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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

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>
相关问题
最新问题