web-dev-qa-db-ja.com

bootstrap modalの境界半径を変更するには？

bootstrap modal。の境界半径を変更できません。

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

どうすればいいですか？

csshtml5css3twitter-bootstrap-3bootstrap-4
26
Hikaru Shindo

.modal-content divではなく、.modal divに境界線の半径を適用する必要があります。

bootstrap modalに境界半径を適用する正しい方法は次のとおりです。

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

N.B。カスタムcssがロードされている場合、!importantタグを削除しますafter your bootstrap css。

39
AndrewL64

たぶん、あなたは間違った要素をスタイルしようとしています。

getbootstrap.com/javascript/#static-example に従って、次のスタイルを設定する必要があります。

.modal-content
6
designarti

私は次と成功を使用します：

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

上記の答えに従い、途中で着きました。いくつかの検査の後、特定のインスタンスに.modal-content部分と.modal-dialog部分の両方があることがわかりました。したがって、同じモーダルポップアップに2つの境界線が表示されないように注意してください。 .modal-dialog境界線を削除し、.modal-contentを調整した後、私のモーダルは非常に滑らかに見えます！

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

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

前の回答にあるように、コードがbootstrap=コードの前にある場合は！importantを使用します。

0
Kiky Rodriguez

CSSの一部を上書きするには、Bootstrap後にこのファイルがロードされると仮定して、カスタムCSSファイルに以下を追加できます。

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

単にrounded-0 bootstrapクラスを使用できます。

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