2 rijen van 4 foro's met Bootstrap 3.3.7

Status
Niet open voor verdere reacties.
1

1Marcel1966

Gebruiker
Lid geworden
20 aug 2018
Berichten
15
Hallo,
Ik heb met bootstrap 3.3.7 2 rijen gemaakt met ieder 4 foto's middels md-col-3.
Nu doen alleen foto 4 en 8 exact wat ze doen, namelijk op elkaar aansluiten zonder enige padding of margin.
Foto 1,2,3,5,6 en 7 doen dit niet. Ik heb de code 3 keer gecontroleerd en drie keer overgeschreven, maar ik zie niet waar de fout zit.
Ik ben nieuw in html, css en bootstrap en ik kan alle hulp gebruiken.
Ik heb een foto geplaatst hoe het er nu uitziet ( of eigenlijk niet uitziet haha )Screenshot.png
De HTML code en CSS code heb ik hieronder gezet zodat iemand het kan checken voor mij en mij van een oplossing kan voorzien.
--HTML code:--
HTML: 
<section id="work">
      <div class="content-box">
          <div class="content-title wow animated fadeInDown" data-wow-duration="1s" data-wow-delay=".5s">
              <h3>Our Work</h3>
              <div class="content-title-underline"></div>
          </div>
      </div>
      <div class="container-fluid">
          <div class="row no-gutters wow animated fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/1.jpg" title="Work Description Goes Here">
                          <img src="img/work/1.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/2.jpg" title="Work Description Goes Here">
                          <img src="img/work/2.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/3.jpg" title="Work Description Goes Here">
                          <img src="img/work/3.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div> 
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/4.jpg" title="Work Description Goes Here">
                          <img src="img/work/4.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/5.jpg" title="Work Description Goes Here">
                          <img src="img/work/5.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/6.jpg" title="Work Description Goes Here">
                          <img src="img/work/6.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/7.jpg" title="Work Description Goes Here">
                          <img src="img/work/7.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
              <div class="col-md-3">
                  <div class="img-wrapper">
                      <a href="img/work/8.jpg" title="Work Description Goes Here">
                          <img src="img/work/8.jpg" class="img-responsive" alt="work"> 
                      </a>
                  </div>
              </div>
          </div>
      </div>
  </section>

-- CSS CODE --:
.row.no-gutters [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.img-wrapper {
    overflow: hidden;
}

.img-wrapper img:hover {
    transform: scale(1.5);
}

Alvast bedankt voor alle hulp.
 
Laatst bewerkt door een moderator:
Dit heeft te mnaken met float:left die op elke col-*-* zit. Deze float mag je niet weghalen. Omdat je geen 4 maar 8 columns (elk 3/12) in de row hebt zitten krijg je dit verschijnsel met als veroorzaker de afbeeldingen die een ongelijke verhouding hebben. Als je foto's hebt met een gelijke verhouding hebt (bijv. allemaal even breed én even hoog) dan ben je het kwijt.

Noot: In BS4 is dit verbeterd omdat daar gebruik wordt gemaakt van flex.

Suc6 met BS.
 
Hoi Bron,
Dank je voor je snelle hulp.
Ik heb in photoshop alle foto's aangepast en nu werkt het.
Bedankt!
 
Je kan de BS grid ook gebruiken op een manier dat je wel ongelijke foto's in een col kan zetten.
Code: 
.row.no-col-gutters [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <div class="row no-col-gutters">
                <div class="col-md-3">Foto 1a</div>
                <div class="col-md-3">Foto 1b</div>
                <div class="col-md-3">Foto 1c</div>
                <div class="col-md-3">Foto 1d</div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row no-col-gutters">
                <div class="col-md-3">Foto 2a</div>
                <div class="col-md-3">Foto 2b</div>
                <div class="col-md-3">Foto 2c</div>
                <div class="col-md-3">Foto 2d</div>
            </div>
        </div>
    </div>
</div>
Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan