css 如何改变bootstrap模型的边界半径?

z5btuh9x  于 2023-01-27  发布在  Bootstrap
关注(0)|答案(8)|浏览(141)

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

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

我该怎么做呢?

dgtucam1

dgtucam11#

Bootstrap 3:

在Bootstrap 3中,您需要将边界半径应用于**.modal-contentdiv元素,而不是.modal**div元素,如下所示:

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

注意:如果自定义css是在引导css之后加载的,请删除!important标记。

Bootstrap 4和 Bootstrap 5:

在Bootstrap 4 & Bootstrap 5中,你可以将**rounded-0类名添加到你的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>
yyhrrdl8

yyhrrdl82#

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

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

2mbi3lxu3#

也许您正在尝试设置错误的元素样式。
根据getbootstrap.com/javascript/#static-example,您应该设置以下样式:

.modal-content
5ssjco0h

5ssjco0h4#

我用下面的话和成功:

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

dphi5xsq5#

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删除模态周围的所有边界(左、右、上、下)。

nhjlsmyf

nhjlsmyf6#

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

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

bnl4lu3b7#

我按照上面的答案做了一半。经过一些检查,我意识到我的特定示例既有.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。

y1aodyip

y1aodyip8#

Bootstrap 〉5.2

设置变量可确保其在应用范围内保持一致:

$modal-content-border-radius: 0;

相关问题