Je suis en train d'écrire une interface pour un système de ticket utilisant le système de grille de bootstrap 4 pour positionner les composants sur le système. Comme vous pouvez le constater dans la capture d'écran ci-dessous, l'interface utilisateur dispose de deux divs de fluide conteneur empilés. La Div Div aligne parfaitement, la seconde que je lance.
Je veux que cela rendit comme ça (sans le rose - le rose montrent les deux cols): p>
p>
Cependant, il rendu comme ceci: p>
P>
Le code qui rend cela est le suivant: P>
HTML: P>
body{
background-color: #ababab;
}
.navbar{
color: white;
background-color: rgba(58, 191, 195, 1);
height: 75px;
padding-left: 10px;
padding-right: 10px;
}
.container-navbar{
padding-left: 0px;
padding-right: 0px;
min-width: 490px;
}
.help-desk{
font-size: 30px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
#settings-menu{
font-size: 25px;
cursor: pointer;
}
.ticket-summary-navbar{
background-color: #f7f7f7;
height: 90px;
}
.global-ticket-summary {
font-family: 'Roboto', sans-serif;
color: #1b1b1b;
font-weight: 200;
}
.global-ticket-summary ul {
list-style-type: none;
}
.global-ticket-summary ul li {
text-align: center;
float: left;
width: 100px;
}
.global-ticket-summary ul li .ticketCount {
font-size: 22pt;
margin-bottom: -4px;
cursor: pointer !important;
}
.global-ticket-summary ul li .nameLabel {
font-size: 11pt;
/*margin-bottom: 0;*/
color: #656565;
cursor: pointer !important;
}
Je peux certainement le faire fonctionner en ajoutant "flotteur: droite;" à l'UL - qui positionne correctement horizontalement, mais elle ne s'aligne plus verticalement correctement (il s'enclenche au sommet de la DIV). J'ai recherché dans de nombreux endroits pour une solution, toutefois, tout point à utiliser la barre NAV pour Bootstrap, ce qui n'est pas pertinent dans ce cas. P>
existe une manière que je puisse avoir l'UL aligner le droit à son parent Div Sans le recours au rembourrage / marge CSS hacks? P>
plunkr link Aussi: https://next.plnkr.co/plunk/y4eympgwrvhkjui p> p>
4 Réponses :
Mettez le texte Aligner sur le résumé de ticket global, et si cela ne fonctionne pas, mettez-le dans l'UL. Le texte alignement ne fonctionne que pour les éléments d'enfant directe, je crois
Merci pour votre réponse - j'ai essayé les deux et ils n'ont pas travaillé. Merci quand même.
Avez-vous inspecté votre résumé global-ticket et vos éléments UL pour voir s'ils ont assez de largeur? On dirait que vous l'avez codé dur à 100px, peut-être qu'il n'y a pas assez de place pour réellement faire un alignement de texte à droite
Vous pouvez utiliser Flexbox pour aligner le contenu. Il suffit de mettre cette classe de conteneurs .flex dans votre code à droite alignez les éléments enfants.
.flex-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
Vous voulez mettre UL dans le côté droit du col. Corrigez-moi! Si j'ai mal compris votre question.
Donc, vous devez effectuer ce qui suit dans votre fichier style.css,
Il suffit de remplacer par le code CSS suivant.
Utiliser flex utilitaires pour bootstrap 4. Ajouter les classes suivantes à la première colonne (qui a le droit de droite): D-Flex, Justify-Content-Terminez XXX Il est alignant comme vous voulez la droite. Pour référence ici est un lien vers Flex Utility pour Bootstrap 4: https://getbootstrap.com/docs/4.0/utilities/flex/
Merci mais cela a fait la même chose que le flotteur: Droite; il l'a aligné bien cependant, il n'était plus aligné verticalement au centre
Pour l'aligner verticalement au centre, ajoutez simplement une classe d'Align-item-Center à la colonne avec D-Flex et Justify-Content-End. Il alignera tous les articles à centrer verticalement. Faites-moi savoir si cela résout le problème.