如何更改 bootstrap 模态的边框半径？

Question

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

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

我应该怎么做？

Answer 1

为了覆盖 CSS 的一部分，您可以将以下内容添加到您的自定义 CSS 文件中，假设此文件在 Bootstrap.

之后加载

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

Answer 2

也许您正在尝试设置错误元素的样式。

根据getbootstrap.com/javascript/#static-example，你应该风格：

.modal-content

Answer 3

BOOTSTRAP 3:

在 Bootstrap 3 中，您需要将边框半径应用到 .modal-content div 元素而不是 .modal div 这样的元素：

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

N.B. 如果您的自定义 css 已加载 after，请删除 !important 标签你的 bootstrap css.

BOOTSTRAP 4 & BOOTSTRAP 5:

在 Bootstrap 4 & Bootstrap 5 中，您只需将 rounded-0 class 名称添加到您的 modal-content 元素（或任何其他元素）将其边框半径设置为 0，如下所示：

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-0">
        <!-- Your Modal content here -->
    </div>
  </div>
</div>

Answer 4

我按照上面的答案做了一半。经过一些检查后，我意识到我的特定实例同时具有 .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;
}

如前面的答案所述，如果您的代码出现在 bootstrap 代码之前，请使用 !important。

Answer 5

我使用了以下并且成功了：

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

Answer 6

你可以直接使用 rounded-0 bootstrap class.

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

Answer 7

在 Bootstrap 4 尝试以下操作：

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

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

如何更改 bootstrap 模态的边框半径？

How to change border radius of bootstrap modal?

html

css

twitter-bootstrap

twitter-bootstrap-3

BOOTSTRAP 3:

BOOTSTRAP 4 & BOOTSTRAP 5: