Je veux ajouter une classe à une DIV parentale qui affecte beaucoup d'élemnets intérieurs. Mais quand je fais cela avec Bootstrap, le style est foiré.
Ce code montre le problème sur 2 où vous pouvez voir que la bordure inférieure est mal alignée. Si je fais juste un .toggle (". Second") sur l'élément à la place, cela fonctionnera.
https://www.bootply.com/KOJ4VKNbOa
.second {
display: none;
}
.show-inner .second {
display: block;
}
<div id="outer">
<table class="table">
<thead>
<tr>
<th class="first">A</th>
<th class="second">B</th>
<th class="third">C</th>
</tr>
</thead>
<tbody>
<tr>
<td width="98%" class="first">1</td>
<td width="1%" class="second">2</td>
<td width="1%" class="third">3</td>
</tr>
</tbody>
</table>
</div>
<button onclick="$('#outer').toggleClass('show-inner');">Toggle .second</button>
Dans mon projet, j'aimerais avoir de nombreuses dépendances de cette classe DIV externe, donc le faire fonctionner me ferait économiser beaucoup de code.
1 réponse
utilisez display: table-cell au lieu de block.
.show-inner .second {
display: table-cell;
}
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].