Javascript 当我使用我不使用的引导时,图像重叠';我不想要
此代码是我正在制作的网站的一部分,此部分保留重叠图像。我如何纠正这个问题Javascript 当我使用我不使用的引导时,图像重叠';我不想要,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,此代码是我正在制作的网站的一部分,此部分保留重叠图像。我如何纠正这个问题 <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://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>
相同的图像:
因为您将图像设置为始终为180x180,如果宽度低于540(+一些边距),它们将重叠。您可以通过设置
溢出:隐藏来禁用它代码>在每列上。但在您的情况下,这不应该出现在您使用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>
确保图像的css是位置:静态代码>
如果希望它们与一个和另一个对齐,请添加:display:inline块代码>或如果要向下显示:display:block代码>
请参阅定位:最好为问题创建JSFIDLE,因为您的代码在FIDLE中运行得非常好。是的。覆盖值。刚刚注意到。谢谢您不能将所有这些列放在一行中,它们不适合…当我使用代码时,所有图像都在一行中,并且重叠。当我使用overfow:hidden时,只有半个图像和重叠一起显示。我应该换尺寸吗?增加还是减少?即使我将大小增加到600x600,它仍然是重叠的问题在于CSS或其他方面。检查是否覆盖某些值引导值。这段代码只使用引导程序,效果非常好。是的!!非常感谢。刚刚注意到,被覆盖的值。谢谢