Dev Faq
0
votes

Bouton BOOTSTRAP décalé sur la droite à l'extérieur contenant div

J'ai une page de bootstrap très simple qui a une div avec une colonne de boutons dedans. Pour aucune raison apparente, les boutons sont légèrement déplacés vers la droite:

Entrez la description de l'image ici p>

Entrez la description de l'image ici P >

Entrez la description de l'image ici p>

La DIV contenant (comme en surbrillance ci-dessus) n'a pas de rembourrage ni de marge: P>

Entrez la description de l'image ici p>

et les boutons ont la même marge appliquée des deux côtés: p>

ente r Description de l'image ici p>

HTML associé: P> 

.cinema-list{
    .cinema-button{
        display: block;
    }

    .cinema:hover{
        background-color: $primary;
    }
}

1 commentaires

La propriété CSS Box-dimensionnement nous permet d'inclure le rembourrage et la bordure dans la largeur et la hauteur totale d'un élément. => style = "max-largeur: 700px;" => Comptez Max WIDHT de vos éléments et il est 708px, 8 px DIFF

3 Réponses :

0
votes

C'est parce que vous avez ajouté la classe M-1 dans le bouton. Veuillez supprimer cette classe de celle-ci.

remplacer xxx

avec xxx

espère que cela vous aidera.

1 commentaires

Cela la corrige. Merci beaucoup. A du sens aussi. Avant d'appliquer le bloc BTN, j'avais besoin de la marge d'espace vertical.

0
votes

Veuillez utiliser My-1 code> et MX-0 CODE> Classe au lieu de M-1 CODE> Classe. 

        <button 
            *ngFor="let cinema of cinemaList" 
            type="button"
            class="btn btn-primary cinema-button my-1 mx-0 w-100"
            (click)="selectCinema(cinema)"
            >
            <span>{{cinema.name}}</span>
            <i 
                *ngIf="isFavoriteCinema(cinema)"
                class="fa fa-heart pl-1 heart" 
                aria-hidden="true"></i>
        </button>

0 commentaires
0
votes

Alok Mali's Réponse corrige le problème.

Je ne vois aucune raison pour laquelle les boutons sont décalés. Est-ce un bug avec bootstrap?

Non, c'est ainsi que CSS est conçu.

C'est la cause première de la raison pour laquelle cela se produit.

in bootstrap par Par défaut Tous les éléments ont dimensionnement de la boîte: bordure;

Ceci est effectué par réinitialisation.scss xxx

pour < Code> Borge-Box Les propriétés de largeur et de hauteur d'un élément incluent le contenu, le rembourrage et la bordure, mais n'incluent pas la marge . Dans votre cas, vous avez une marge de .25em lorsque vous avez appliqué la classe M-1 , c'est pourquoi votre élément (bouton dans ce cas) a survolé.

Plus Lire de Tableau de la boîte Ici

espère que cela aide.

0 commentaires

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor