wake-up-neo.net

Wie kann man den Grenzradius von Bootstrap-Modal ändern?

Ich kann den Grenzradius von Bootstrap-Modal nicht ändern.

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

Wie soll ich das machen? 

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

Sie müssen den Randradius auf das .modal-content div anwenden und nicht das .modal div.

So setzen Sie den Grenzradius an Ihrem Bootstrap-Modal richtig an:

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

N.B. Entfernen Sie die !important-Tags, wenn Ihre benutzerdefinierte css nach Ihrer Bootstrap-css geladen ist.

34
AndrewL64

Vielleicht versuchen Sie, das falsche Element zu stylen.

Gemäß getbootstrap.com/javascript/#static-example sollten Sie Folgendes festlegen:

.modal-content
6
designarti

Ich benutze folgendes und Erfolg:

<div class="modal-content" style="background: transparent;">
                      <div class="modal-body" style="border-radius: 10px;">
1
herry swastika

Ich folgte den Antworten oben und bin auf halbem Weg dorthin gekommen. Nach einiger Inspektion wurde mir klar, dass meine spezielle Instanz sowohl einen .modal-Inhaltsteil als auch einen .modal-Dialogteil hatte. Seien Sie also vorsichtig, dass Sie nicht zwei Ränder für dasselbe modale Popup haben. Nachdem ich den .modal-Dialogrand entfernt und den .modal-Inhalt angepasst habe, sehen meine Modals super glatt aus!

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

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

Verwenden Sie wie in den vorherigen Antworten den Wert!, Wenn Ihr Code vor dem Bootstrap-Code angezeigt wird.

0
Kiky Rodriguez

Um ein CSS-Element zu überschreiben, können Sie Ihrer benutzerdefinierten CSS-Datei Folgendes hinzufügen, vorausgesetzt, diese Datei wird nach Bootstrap geladen.

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

Sie können einfach rounded-0 bootstrap Klasse.

<div class="modal-content rounded-0">
</div>
0
wet_waffle