Leerraum links und rechts um Bilder bei Bootstrap col

Question

Ich habe eine Zeile mit 3 Bildern.
Bild links hat Leerzeichen auf der linken Seite.
Bild rechts hat Leerraum auf der rechten Seite.

Wie kann ich das beheben, so habe ich keine mit Platz auf der linken und rechten Seite?

Sehen Sie meinen Code unten:

Der Hintergrund ist orange in dem Bild, so dass es besser sichtbar ist.

HTML:

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 featured"> 

     <div class="col-md-4 img-featured-1"> 
     <%= image_tag("featured-1.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <%= image_tag("featured-2.jpeg", class: "img-responsive") %> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <%= image_tag("featured-3.jpeg", class: "img-responsive") %> 
     </div> 

    </div> 
    </div> 
</div> 

CSS:

.featured { 
    background-color: orange; 
} 
.img-featured-1 { 
    width: 33.33333%; 
    float: left; 
} 
.img-featured-2 { 
    width: 33.33333%; 
} 
.img-featured-3 { 
    width: 33.33333%; 
    float: right; 
} 

See the image

Answer 1

Es ist wahrscheinlich, weil die .row Klasse einen gewissen Spielraum an den Seiten erweitert.

Versuchen Sie folgendes:

.row { 
    margin: 0; 
} 

Answer 2

Paar Dinge, erste, was ist Ihr Stylesheet. Es sollte .img-featured-1 sein (der Punkt definiert, dass dieser Stil auf Klassen des angegebenen Namens angewendet wird).

Als nächstes, wenn das nicht löst, überprüfen Sie Ihre Designstilvorlage und/oder überschreiben Sie den Rand und das Padding mit {margin: 0! Wichtig; Padding: 0! wichtig; }

Schließlich stellen Sie sicher, dass Ihre Bilder selbst keinen weißen/transparenten Raum haben.

Answer 3

Versuchen Sie folgendes:

.featured { 
    background-color: orange; 
} 

.nopadding { 
    padding:15px 0px;} 

+

<div class="container section"> 
    <div class="row"> 
    <div class="col-md-offset-1 col-md-10 nopadding"> 

     <div class="col-md-4 img-featured-1"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-2"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 
     <div class="col-md-4 img-featured-3"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"> 
     </div> 

    </div> 
    </div> 
</div>