尝试使用Bootstrap使图像适合整个列/行
[英]Trying to get images to fit entire column/row using Bootstrap
问题描述
I'm trying to get three images to cumulatively take up an entire bootstrap row (effectively each taking up a column that spans 4). 
我正在尝试获取三个图像来累积占用整个引导程序行（有效地每个图像占用一个跨越4列的列）。 However, my code right now has them leaving gaps in between, and on either side. 但是，我的代码现在在它们之间以及在任何一侧都留有空隙。 I've attached a screenshot of the problem, with the ideal solution to have the images take up the entire space without leaving any gaps. 我附上了问题的屏幕截图，提供了理想的解决方案，使图像占据整个空间而没有任何间隙。 Below is the relevant html: 以下是相关的html：
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%">
</div>
</div>
</div>
</body>
2 个解决方案
解决方案1
1 已采纳 2017-07-24 20:57:36
Bootstrap columns have default right and left padding of 15px. Bootstrap列的默认左右填充为15px。 Inspect the columns in devtools and you will see it. 检查devtools中的列，您将看到它。 You need to over ride it with your own custom css. 您需要使用自己的自定义CSS跳过它。
解决方案2
0 2017-07-25 06:08:42
Here you go with a solution https://jsfiddle.net/hhzbxrbf/ 在这里您可以找到解决方案https://jsfiddle.net/hhzbxrbf/
.col-md-4 { padding: 0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" /> </div> <div class="col-md-4"> <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" /> </div> <div class="col-md-4"> <image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" /> </div> </div> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.