gpt4 book ai didi

html - Bootstrap Column 6 图片问题

转载 作者:行者123 更新时间:2023-11-28 06:57:50 26 4
gpt4 key购买 nike

现在,这是一个新元素,所以我需要一些帮助。

我有以下代码。请按全屏。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<head>
<title>Stack Overflow Question</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style/home.css">
<!-- Reference to main CSS Style File-->
<style>


ul {
margin:0 auto;
border-top:2px solid #000;
border-bottom: 2px solid #000;
padding:10px;
text-align: center;
font-family:"montserratlight";
text-transform: uppercase;
}

</style>
</head>
<body>
<div class="container">

<div id = "navigation">
<p>
<ul class="col-md-12">
<!-- MAIN NENU BAR -->
<li><a href="home.html" class="active"><b>Home</b></a></li>
<li><a href="about.html">Why Does This</a></li>
<li><a href="products.html">Not</a></li>
<li><a href="contactUs.html">Work</a></li>
</ul>
<!-- Unordered lists.-->
</p>
</div>

<div class = "row">
<!-- Declaration of First Row -->
<div class="imageHolder col-md-12 hvr-underline-from-center">
<!-- Image Container as DIV -->
<div class = "imageInside" >
<img id = "imageHomeJPG" src="http://s30.postimg.org/8wav359r5/NYC.jpg" style="width:100%" />
</div>
<!-- Image Link -->
</div>
</div>

<div class="row">
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/mehrfflwh/Place1.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
<div class="col-md-6">
<a href="about.html">
<img src = "http://s30.postimg.org/iw5rj1l0h/Place2.jpg" style="margin-bottom:10px; margin-top:10px; width:100%;"/>
</a>
</div>
</div>
</body>
</html>

现在,展开后,这就是网站显示的内容。

Screenshot of full website.

但是,第 6 列的两张照片之间有一个小差距。

The Gap between the photos

<div class="row" style="padding-right:0">
<div class="col-md-6">
IMAGE TAG
</div>
<div class="col-md-6" style="padding-left:0">
IMAGE TAG
</div>

这产生了以下 - When Padding was removed

您可以看到左边的图像在右边更大,因此不正确。我的问题是,如何在不需要更改填充的情况下使两列之间的间隙更小(到 10px 左右)?我想让图像变大以减小间隙的大小,但我似乎找不到办法!

谢谢。

最佳答案

创建一个类:

no-space { 
Width: 100% !important;
Margin: 0px !important;
}

然后把这个类放在 col-md-6 被这样的空间渗透的地方旁边:

Class="col-md-6 no-space"

现在照片之间应该没有空格了。

关于html - Bootstrap Column 6 图片问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33404029/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com