奇怪的空间之前，图像放置在引导列

我试图创建一个图像库，其中三个图像放置在每行4列，使他们之间没有空白区，他们触摸。但是在这样做的时候，每列中每个图像左侧都有一些奇怪的空白。奇怪的空间之前，图像放置在引导列

到这里看看：http://www.bootply.com/IQMBlg5q9L

2017-05-06 Parker Queen

请尝试此代码此代码将完美工作，无需添加任何额外的类比bootstrap。第二个答案 –

.no-gutters不是一个内置的自举类。要使用它，你需要添加它自己引用的必需的CSS。例如：

img { max-width: 100%;} 

.row.no-gutters { 
    margin-right: 0; 
    margin-left: 0; 
} 

.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { 
    padding-right: 0; 
    padding-left: 0; 
}

在下面的代码片段我换成你“MD”的cols以“XS”，降低了图像的大小，只需所以它不会在视窗这里崩溃：

img { max-width: 100%;} 
 

 
.row.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
} 
 

 
.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 

 
<div id="portfolio-main"> 
 
    <div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <img src="https://placehold.it/250x150"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-06 10:26:01 mayersdesign

但是，即使容器是流体，第一个图像的左侧仍然有那么小的空白区域，而第二个图像的右侧仍然有空白区域。我该如何解决这个问题？ –

添加..container-fluid {padding：0px！important}会这样做。尽管您可能也想简单地移除容器。 – mayersdesign

嘿，你能告诉我为什么会发生？我认为容器流体横跨整个可用宽度！情况不是这样吗？ –

没有必要在bootstrap中为空间问题添加额外的类。为了消除间距问题，您可以使用类行

<div id="portfolio-main"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-md-4"> 
          <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
          </div> 
         </div> 
         <div class="col-md-4"> 
         <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
           </div> 
         </div> 
         <div class="col-md-4"> 
          <div class="row"> 
          <img class="img-responsive" src="https://placehold.it/350x150"> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div>

来源

2017-05-06 10:42:28

奇怪的空间之前，图像放置在引导列

回答

相关问题