Question

我无法更改bootstrap模式的边框半径。

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

我该怎么办？

Answer 1

您需要将边框半径应用于 .modal-content div，而不是 .modal div。

以下是将边界半径应用于引导模式的正确方法：

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

N.B。如果你的自定义css在你的引导程序之后加载，则删除!important标记。

Answer 2

也许你正试图设计错误的元素。

根据getbootstrap.com/javascript/#static-example，您应该设置样式：

.modal-content

Answer 3

您可以只使用rounded-0引导程序类。

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

Answer 4

为了覆盖一块CSS，您可以将以下内容添加到自定义CSS文件中，假设此文件在Bootstrap之后加载。

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

Answer 5

我遵循了上面的答案，我到达了一半。经过一番检查，我意识到我的特定实例同时具有.modal-content部分和.modal-dialog部分。因此请注意，在同一模式弹出窗口上不要有两个边框。在删除.modal-dialog边框并调整了.modal-content之后，我的模态看起来超级漂亮！

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

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

作为先前的答案状态，如果您的代码出现在引导程序代码之前，请使用！important。

Answer 6

我使用以下方法并获得成功：

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

Answer 7

在 Bootstrap 4 中，尝试以下操作：

Messages are highly efficient

Strong schema support

Schema versioning

Dynamic schema support

Different, but compatible, Reader and Writer versions allowed
Union types

Object container files can include schema along with encoded records
Support for serialization/deserialization with human-readable JSON

边框半径删除圆角，而 border 删除模态周围的所有边框（左，右，上，下）。

如何更改bootstrap模式的边界半径？

7 个答案: