Bootstrap image thumbnail Behälter keine Lücke

Question

i erstellt Bildergalerie mit Beschriftung an der Spitze mit Thumbnail-Klasse von Bootstrap wie folgt aus:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style=""> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style=""> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="https://dummyimage.com/600x400/000/fff" target="_blank" style=""> 
 
      <img src="https://dummyimage.com/600x400/000/fff" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

aber das Problem ist es ein wenig recht, links, und untere Lücke wie folgt:

Ich möchte die thumbnail cotainer Grenze mit der Bildgröße passen, gibt es eine Möglichkeit, dies zu tun?

Answer 1

Update benutzerdefinierten Stil

Fiddle Demo

.thumbnail 
{ 
    padding: 0px !important; 
} 

Snippet Beispiel

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 
.thumbnail 
 
{ 
 
    padding: 0px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="/w3images/lights.jpg" target="_blank" style=""> 
 
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="/w3images/lights.jpg" target="_blank" style=""> 
 
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="thumbnail"> 
 
     <div class="caption" style="margin-bottom:15px;"> 
 
      <p style="font-weight:bold;">Lorem ipsum donec id elit non mi porta gravida at eget metus.</p> 
 
      <a href="google.com" target="_blank" style=""> View more </a> 
 
     </div> 
 
     <a href="/w3images/lights.jpg" target="_blank" style=""> 
 
      <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" alt="Lights" style="width:100%"> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie folgendes:

.col-md-6 { 
    margin: 0; 
} 

Oder

.col-md-6 { 
    padding: 0; 
} 

Answer 3

Ich denke, man sollte das Padding-Tag zu der Zeile hinzufügen. dann hat es nog Leerzeichen mit dem Behälter

.row { 
    padding: 0; 
} 

<div class="row"> 

Answer 4

Der Grund gibt es eine Lücke, weil die Miniatur Klasse Polsterung hat. Um dies zu beheben Sie es entfernen müssen ...

.thumbnail{ 
    padding: 0px !important; 
}