当我使用我不想要的bootstrap时图像重叠

Question

此代码是我正在制作的网站的一部分，此部分保持重叠的图像。我该如何纠正？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid" style="background-color:white; height:700px;">
    <div class="row">
        <div class="col-md-6">
            <img src="images/team/app2.jpg" style="height:180px;width:180px;">
        </div>
        <div class="col-md-6">
            <img src="images/team/website.png" style="height:180px;width:180px;">
        </div>
        <div class="col-md-4">
            <img src="images/team/designer1.jpg" style="height:180px;width:180px;">
        </div>
        <div class="col-md-4">
            <img  src="images/team/content.png" style="height:180px;width:180px;">
        </div>
        <div class="col-md-4">
            <img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
        </div>
    </div>
</div>

相同的图像：

Answer 1

因为如果宽度将低于540（+一些边距），则将图像设置为始终为180x180，它们将重叠。您可以通过在每列上设置overflow: hidden;来禁用它。但在你的情况下，这不应该出现，因为你正在使用md列。

所以我认为你的问题是你的专栏太多了。每次超过行列限制时，应该有下一行，默认值为12。

<div class="container-fluid" style="background-color:white; height:700px;">
<div class="row">
  <div class="col-md-6">
      <img src="images/team/app2.jpg" style="height:180px;width:180px;">
  </div>
  <div class="col-md-6">
      <img src="images/team/website.png" style="height:180px;width:180px;">
  </div>
</div>
<div class="row">
  <div class="col-md-4">
     <img src="images/team/designer1.jpg" style="height:180px;width:180px;">
  </div>
  <div class="col-md-4">
      <img  src="images/team/content.png" style="height:180px;width:180px;">
  </div>
  <div class="col-md-4">
      <img src="images/team/marketing2.jpg" style="height:180px;width:180px;">
  </div>
</div>
</div>

Answer 2

确保您的图片的CSS为position: static;

如果您希望它们与其中一个匹配，请添加：display: inline-block;或者如果您希望它只是向下：display: block;

请参阅定位：https://developer.mozilla.org/en-US/docs/Web/CSS/position