bootstrap模态不是圆形而是方形

Question

我正在使用adminlte for asp.net webform项目。在母版页中我导入了所有js和css。我的问题是bootstrap模态不是圆形而是方形。请看下面的图片。这是为什么？请帮忙，谢谢！

//Master Page
   <!-- jQuery 2.1.4 -->
<script src="adminlte/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- jQuery UI 1.11.4 -->
<script src="adminlte/plugins/jQueryUI/jquery-ui.min.js" type="text/javascript"></script>
<!-- Bootstrap  -->
<link href="adminlte/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="adminlte/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

    <!-- DataTables -->
 <link href="Scripts/DataTables-1.10.7/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="Scripts/DataTables-1.10.7/media/js/jquery.dataTables.min.js" type="text/javascript"></script>

<link href="Scripts/jquery-ui-1.11.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />

//aspx file (not aspx master page)
    function openModal() {
    enableDataTable();
    $('#mBarbers').modal('show');
}

Answer 1

如果没有看到实际输出的代码，很难说清楚。它可能是某个覆盖.modal-content类边界半径的样式。要了解正在进行的操作，请按照以下步骤跟踪样式。

由于您说您使用的是Chrome，请转到开发者工具（Ctrl-Shift-I或菜单 - 更多工具 - 开发人员工具）。

打开漂亮的Bootstrap模式。

转到“元素”标签。选择元素选取器（开发工具栏右上角的工具，看起来像鼠标指针）

将鼠标悬停在您的模态上，然后突出显示。单击它，它将在元素面板中突出显示。您还应该有一个样式选项卡，该选项卡将列出与该元素相关的样式。

你现在可能需要稍微挖掘一下，但是一旦你找到了“模态内容”。对于border-radius，它应该有一个css规则。这是我的一个项目的一个例子。

.modal-content{
    position: relative;
    background-color: #ffffff;
    border: 1px solid #999999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px; /*<!-- HERE I AM!---*/
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    outline: none;
}

问题可能是您的bootstrap css版本中没有border-radius部分。如果你想要它，你可以添加它或添加一个更高级别的样式表来应用它，例如＆＃39; custom.css＆＃39;使用规则只是将border-radius添加到modal-content类。这样你就不需要覆盖/改变第三方css。

希望这有助于至少弄清楚问题，如前所述，没有相关的代码片段（我们不需要ASP，只需输出html / css），这主要是猜测。

Answer 2

我遇到了这个问题，并注意到如果我设置了以下css样式，我选择的背景颜色，就过了角落。当我删除这个css背景颜色时，我又看到了圆角：

.modal-body, .modal-header, .modal-footer {
    background-color: #ddd;
}

Answer 3

我刚刚找到了一个并不可怕的工作，尽管我几乎都期望这是在引导程序中。

.modal-content {
    overflow:hidden;
}