Je ne sais pas si mon problème est la ligne imbriquée, mais je ne peux pas aligner verticalement la ligne intérieure dans sa boîte d'alerte. Quelqu'un a-t-il une idée de ce que je fais mal?
https://jsfiddle.net/d2pg4xta/
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row"> <!-- here is my nested row -->
<div class="col-md-6"><p class="mb-0">1:</p></div>
<div class="col-md-6"><p class="mb-0">A</p></div>
<div class="col-md-6"><p class="mb-0">2:</p></div>
<div class="col-md-6"><p class="mb-0">B</p></div>
<div class="col-md-6"><p class="mb-0">3:</p></div>
<div class="col-md-6"><p class="mb-0">C</p></div>
<div class="col-md-6"><p class="mb-0">4:</p></div>
<div class="col-md-6"><p class="mb-0">D</p></div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
Mise à jour: Il ne s'agit pas d'aligner l'alerte 2 -boxes, il s'agit de l'intérieur de ma boîte d'alerte gauche. Je m'attends à ce que la ligne intérieure contenant le contenu (abcd1234) soit plus centrée avec sa propre boîte d'alerte comme celle-ci: https: // ibb.co/myntK5j
3 Réponses :
Essayez d'ajouter display: flex; à .alert.alert-dark .
dans mon exemple, cela n'aide pas. il visse la vue d'ensemble. Je ne suis pas sûr, peut-être parce que j'utilise d-flex sur un élément parent parce que je veux que les deux boîtes d'alerte soient également centrées sur une ligne.
Faites ceci:
.alert-dark {
display: flex; /*add*/
flex-direction: column; /*add*/
align-items: center; /*add*/
color: #1b1e21;
background-color: #d6d8d9;
border-color: #c6c8ca;
}
cela ne me change rien. J'utilise déjà d-flex pour aligner les 2 boîtes d'alerte verticalement dans la rangée extérieure. C'est peut-être un problème?
la chose étrange est que sur le lien que vous avez donné, cela fonctionne
il ne s'agit pas d'aligner les 2 boîtes d'alerte, il s'agit de l'intérieur de la boîte d'alerte à gauche: ibb.co/myntK5j J'attends le (1234ABCD) plus centré comme le carré marqué en rouge
les règles flex que j'ai écrites ci-dessus dans ma réponse ne font que centrer le contenu des blocs gauche et droit, mais seulement ici jsfiddle.net / d2pg4xta
Dans le tout premier commentaire, vous verrez ma capture d'écran. C'est le résultat du code, qui dans mon exemple
Désolé pour ces circonstances, quand je l'ai essayé pour la première fois, cela n'a rien changé. Maintenant, cela fonctionne aussi sur mon jsfiddle. Peut-être que le cache ou quelque chose m'a frappé ou que je ne faisais pas assez attention. Merci Monsieur!
Est-il possible d'obtenir plus d'informations sur le fonctionnement de votre solution? J'ai joué avec d-flex et align-items-center mais je n'ai pas réussi à le faire fonctionner. J'ai ajouté ces classes sur ma rangée intérieure où rien n'a changé.
Toujours heureux de vous aider. Dites-moi, les mêmes plugins sont-ils connectés sur votre site de production que dans https://jsfiddle.net/d2pg4xta/ ?
J'utilise: bootstrap.min.css jquery-3.4.1.min.js popper-1.14.7.min.js bootstrap.min.js bootstrap est la version 4.3.1
Étrange alors ... Ma solution fonctionne comme suit: L'affichage flexible rend le bloc caoutchouteux, la colonne flex-direction: ajuste la hauteur, et l'aling-items: center s'aligne sur le centre. Veuillez ajouter le quatrième paramètre à ma solution - justify-content: center (car flex-direction: column est enregistré). C'est pour un centrage absolu de votre contenu intérieur. Et l'essentiel! Essayez d'ajouter ! Important après chaque règle de ma solution. Ça devrait marcher!
Vous devez utiliser flex sur .alert-box et supprimer margin de .row
Js fiddle: https://jsfiddle.net/zbywdacp/
Démo en direct:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 d-flex">
<div class="alert alert-dark">
<div class="row m-0">
<div class="col-md-6">
<p class="mb-0">1:</p>
</div>
<div class="col-md-6">
<p class="mb-0">A</p>
</div>
<div class="col-md-6">
<p class="mb-0">2:</p>
</div>
<div class="col-md-6">
<p class="mb-0">B</p>
</div>
<div class="col-md-6">
<p class="mb-0">3:</p>
</div>
<div class="col-md-6">
<p class="mb-0">C</p>
</div>
<div class="col-md-6">
<p class="mb-0">4:</p>
</div>
<div class="col-md-6">
<p class="mb-0">D</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 d-flex">
<div class="alert alert-dark text-center">
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
<p>Lorem ipsum ...Lorem ipsum ...</p>
</div>
</div>
</div>
</div>
.row {
background: #f8f9fa;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.alert-dark {
display: flex;
align-items: center;
justify-content: center;
}
Cela semble fonctionner aussi bien que la réponse de Sergey Kuznetsov. Une explication suggère pourquoi cela fonctionne? J'ai joué avec d-flex et align-items-center mais je ne pouvais pas le faire fonctionner. J'ai ajouté ces classes sur ma rangée intérieure où rien n'a changé.
comme ça? - ibb.co/dt3M0R6
oui, c'est ce que j'essaye de réaliser
@Yaerox C'est à quoi ça ressemble déjà dans votre violon? à quoi vous attendez-vous finalement?
@AlwaysHelping Je ne pense pas. Pour moi, mon jsfiddle n'est pas centré. ibb.co/Qpw6Q5y il y a 2 lignes rouges. Je veux ce centre vertical avec la boîte d'alerte dans laquelle il se trouve.
Je pense que l'intérieur (1234ABCD) devrait ressembler davantage à: ibb.co/myntK5j