2016-10-26 5 views
0

Ich benutze Bootstrap und teilte die Zeile in 4: 8, In Spalte-4 ich einen Absatz anzeigen, während in Col-8 ich ein Miniaturbild Karussell von 3 Bild in jedem anzuzeigen col, Das Problem, das ich gegenüberstelle, ist das Bild einige Ränder speziell links und rechts des Karussells, die ich entfernen möchte und zweitens möchte ich die 3 Bilder von 240 * 158 (tatsächliche) Größe jeweils im Karussell anzeigen . Hier ist mein CodeAnpassen von Bildgrößen und Padding im Bootstrap

Eigentlich möchte ich einige Sache haben, wie die Here is the link

HTML

<div class="col-md-8"> 
     <h1> Current Projects </h1> 

    <div class="carousel slide" id="myCarousel" style="background:#CCC"> 
    <div class="carousel-inner"> 
     <div class="item active"> 
       <ul class="thumbnails"> 
        <li class="col-md-4"> 
         <div class="fff"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://placehold.it/100x20" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>Praesent commodo</h4> 
           <p>Nullam Condimentum Nibh Etiam Sem</p> 
           <a class="btn btn-mini" href="#">» Read More</a> 
          </div> 
         </div> 
        </li> 
        <li class="col-sm-4"> 
         <div class="fff"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://placehold.it/100x20" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>Praesent commodo</h4> 
           <p>Nullam Condimentum Nibh Etiam Sem</p> 
           <a class="btn btn-mini" href="#">» Read More</a> 
          </div> 
         </div> 
        </li> 
        <li class="col-sm-4"> 
         <div class="fff"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://placehold.it/100x20" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>Praesent commodo</h4> 
           <p>Nullam Condimentum Nibh Etiam Sem</p> 
           <a class="btn btn-mini" href="#">» Read More</a> 
          </div> 
         </div> 
        </li> 
       </ul> 
      </div> 

CSS

img{ 
max-width:100%; 
} 
.thumbnails li> .fff .caption 
{ 
background:#fff !important; 
padding:10px 
} 
ul.thumbnails { 
margin-bottom: 0px; 
} 
/* Thumbnail Box */ 
.caption h4 { 
color: #444; 
} 
.caption p { 
color: #999; 
} 
li { list-style-type:none;} 
+0

@Ricky Sie url/jsfiddle oder versuchen teilen können Zeilenklasse mit Thumbnails zu setzen. – Arun

Antwort

0

u müssen Polsterung und Grenze von Thumbnail-Klasse entfernen

so

.thumbnail{ 
    padding: 0; 
    border: none; 
} 

siehe meine aktualisiert fiddle