Marginesy w obrazku bootstrapa

Question

Witam serdecznie. Mam proste pytanie, jak usunąć te marginesy między obrazkami? Stosuję grid system bootstrapa.

 

kod html:

<section>
        <div class="container">
            <div class="row">
                <center><h1 class="wow bounceInUp">galeria</h1></center>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="0.5s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="1s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="1.5s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="2s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="2.5s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
            <div class="col-sm-4 nomargins wow fadeIn" data-wow-delay="3s">
                <img src="http://www.placehold.it/450x250" class="img-responsive nomargins" id="d1">
                <div id="d2">zawartosc</div>
            </div>
        </div>
    </section>

(wow fadein to biblioteki odpowiadające za animacje, nie mają nic wspólnego z problemem)

css:

#d1
{
    
}
 
#d2
{
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    text-align: center;
    color: #333;
    opacity: 1;
    background: rgba(0, 115, 255, 1);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    display:none;
}

.nomargins {
    margin-right: -15px; // Removes the right gap
    margin-left: -15px;  // Removes the left gap
}

 

Answer 1

Co prawda z bootstrapem jeszcze nie pracowałem, ale zastanawia mnie dlaczego w klasie nomargins masz  -15px za miast po prostu 0.

Comments

efekt samodzielnej próby uporania się z tym, niestety nic nie daje zmiana wartości na 0.

---

Teoretycznie jeżeli dasz 0px dorzucisz im atrybut !important to może zadziała.

Answer 2

Grid system w bootstrapie ma domyślnie ustawiony padding chyba 15px. Raczej nie powinieneś tego paddingu usuwać.

Dla grida nie powinieneś dodawać niestandardowych klas, to ma być tylko szkielet.

Lepszym sposobem byłoby chyba ustawienie tych obrazków inline.

No i ja się pytam, dlaczego w kodzie masz więcej elementów o takim samym id (#d2)?

Comments

Tylko jak kolega napisał przyczyną jest margines, nie padding. Chyba, że kolega nie sprawdził dokładnie i tylko przypuszcza, że to margines :P

---

Kolega nie sprawdził dokładnie.

Kolumny w bootstrapie domyślnie mają ustawiony tylko padding.

A padding to też jest margines.