Conflitto tra le mie row e le row di bootstrap

**he-man** · 12-04-2021, 08:17

Si, le mie row sono nella parte precedente. Ho provato a modificare nel modo che dici ma lo spazio tra il primo e il secondo blocco di immagini rimane. Posto il codice che ho

codice:

<style>
.grid {
  float: left;
  width: 25%;
  padding: 6px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  
}


.containerTab {
 padding: 20px;
  color: #555555;
  
}

div:not(.containerTab) .row:after {
  content: "";
  display: table;
  clear: both;
}


.closebtn {
   float: right;
  color: #aa1a2f;
  font-size: 35px;
  cursor: pointer;
}
.grid-thumbnail{
  width: 100%;
   height: auto;
}

</style>


</head>

<body>
<div class="row">
  <div class="grid" onclick="openTab('b1');">  
 <img src="img.jpg" alt="..." class="grid-thumbnail"> 
  </div>
<div class="grid" onclick="openTab('b2');">
    <img src="img2.jpg" alt="..." class="grid-thumbnail">
  </div>
<div class="grid" onclick="openTab('b3');">
    <img src="img3.jpg" alt="..." class="grid-thumbnail">
  </div>


</div>



<div id="b1" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="img.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
  </div>
  
</div>

<div id="b2" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="img2.jpg" alt="..." class="img-fluid"></div>
   <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b3" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 <div class="row">
    <div class="col"><img src="img3.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
  </div>
</div>


<div class="row">
  <div class="grid" onclick="openTab('b4');">  
 <img src="img4.jpg" alt="..." class="grid-thumbnail"> 
  </div>
<div class="grid" onclick="openTab('b5');">
    <img src="img5.jpg" alt="..." class="grid-thumbnail">
  </div>
<div class="grid" onclick="openTab('b6');">
    <img src="img6.jpg" alt="..." class="grid-thumbnail">
  </div>

</div>



<div id="b4" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="img4.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
  </div>
  
</div>

<div id="b5" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
  <div class="row">
    <div class="col"><img src="img5.jpg" alt="..." class="img-fluid"></div>
   <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
</div>

<div id="b6" class="containerTab" style="display:none;background:#fff">
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 <div class="row">
    <div class="col"><img src="img6.jpg" alt="..." class="img-fluid"></div>
    <div class="col"><h2 style="color:grey;">testo</h2><p>testo testo</p></div>
  </div>
</div>

<!---Poi il codice si ripete con numerazione crescente per averne altri uno sotto l'altro--->

Discussione: Conflitto tra le mie row e le row di bootstrap

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio