web-dev-qa-db-fra.com

Comment changer le rayon de bordure du bootstrap modal?

Je ne parviens pas à modifier le rayon de la bordure du bootstrap modal.

.modal{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px; 
}

Comment devrais-je le faire? 

html5twitter-bootstrapcss3twitter-bootstrap-3bootstrap-4
23
Hikaru Shindo

Vous devez appliquer le rayon de la bordure au.modal-contentdiv et non au.modaldiv.

Voici la bonne façon d'appliquer un rayon de bordure à votre modal bootstrap:

.modal-content  {
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important; 
}

N.B. Supprimez les balises !important si votre css personnalisé est chargé après votre css bootstrap.

34
AndrewL64

Peut-être que vous essayez de dénommer le mauvais élément.

Selon getbootstrap.com/javascript/#static-example , vous devez styler:

.modal-content
6
designarti

J'ai suivi les réponses ci-dessus et je suis arrivé à mi-chemin. Après une inspection, je me suis rendu compte que mon cas particulier comportait à la fois une partie .modal-content et une partie .modal-dialog. Veillez donc à ne pas avoir deux frontières dans la même fenêtre contextuelle modale. Après avoir supprimé la bordure de la boîte de dialogue .modal et ajusté le contenu .modal, mes modaux paraissent super bien lisses!

.modal-content { 
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.modal-dialog {
    border: 0px !important;
}

Comme indiqué dans les réponses précédentes, utilisez! Important si votre code apparaît avant le code d'amorçage.

0
Kiky Rodriguez

Pour écraser un morceau de CSS, vous pouvez ajouter ce qui suit à votre fichier CSS personnalisé, en supposant que ce fichier soit chargé après Bootstrap.

.modal{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important; 
}
0
Teknotica