文章/答案/技术大牛

发布

社区首页 >问答首页 >引导列6图像问题

问引导列6图像问题
EN

Stack Overflow用户

提问于 2015-10-29 00:35:56

回答 1查看 50关注 0票数 0

现在，这是一个新项目，所以我需要一些帮助。

我有下面的代码。请按全屏。

<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>

现在，当扩展的时候，这就是网站所显示的。

然而，第6栏的照片之间有一个很小的差距。

<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>

这产生了以下情况-

你可以看到左边的图像在右边更大，因此它是不正确的。我的问题是，在不需要更改填充的情况下，如何使两列之间的差距缩小(到10 to左右)？我想让图片更大，以缩小差距，但我似乎找不到一条路！

谢谢。

margin

padding

html

css

twitter-bootstrap

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-29 00:42:03

上课：

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

然后将这个类放在col-md-6被这样一个空格划分的位置的旁边：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33404029

复制

相似问题

问引导列6图像问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导列6图像问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导列6图像问题
EN