试图让图像适合整个列/行使用引导

问题描述：

我试图让三个图像累积占用整个引导行（实际上每个占用一个跨越4列）。然而，我现在的代码让他们在两边和两边都留下了空白。我附上了该问题的截图，并提供了理想的解决方案，让图像占据整个空间而不会留下任何空白。下面是相关的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>

Screenshot of Issue

的cols有填充。您可以删除填充（正确地通过sass或更少），或者您将它们作为div的背景，或者不使用行/列作为您的站点 – yBrodsky

的那个默认装订线。设置填充为0 .somenamespace .col-md-4 {padding：0;} – karthick

答

引导列具有默认权限和15px的左填充。检查devtools中的列，你会看到它。你需要用自己的自定义CSS来搭配它。

答

在这里，你去了一个解决方案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>

试图让图像适合整个列/行使用引导

相关推荐