bootstrap模式不是圓形的，而是正方形

我正在使用adminlte for asp.net webform項目。在母版頁中，我導入了所有js和css。我的問題是bootstrap模態不是圓形，而是方形。請看下面的圖片。這是爲什麼？請幫忙，謝謝！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'); 
}

來源

2015-12-03 Francis Saul

您使用的是IE8嗎？ – Matthew

我使用谷歌瀏覽器。 –

你做了什麼？只需向我們展示代碼。 – Sankar

在沒有看到代碼，您的實際產量也很難說。這可能是某個地方覆蓋了.modal-content類的邊界半徑的某處。要了解發生了什麼，請按照以下步驟追蹤風格。由於您說您使用的是Chrome，請進入開發人員工具（Ctrl-Shift-I或菜單 - 更多工具 - 開發人員工具）。

打開你漂亮的Bootstrap模式。

轉到元素選項卡。選擇元素選取器（開發工具欄右上角的工具，看起來像鼠標指針）

將鼠標懸停在您的模式上，它應該突出顯示。點擊它，它將在元素面板中突出顯示。您還應該有一個樣式選項卡，它將列出與該元素相關聯的樣式。

現在你可能需要挖掘一下，但是一旦你找到'模態內容'元素，這應該有一個css規則在border-radius。以下是我的一個項目的示例。

.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版本沒有邊界半徑部分。如果你需要它，你可以添加它或添加一個更高級別的樣式表來應用它，比如'custom.css'，其中的規則只是將模式內容類添加到border-radius中。這樣你就不需要覆蓋/改變第三方的CSS。

希望這有助於至少解決問題，如前所述，沒有相關的代碼片段（我們不需要ASP，只是輸出html/css），這大多是猜測。

來源

2015-12-03 09:19:22

我有這個問題，並注意到，如果我設置下面的CSS樣式，我選擇的背景顏色，超過了角落。當我刪除這個CSS背景顏色，我再次看到了圓邊：

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

來源

2016-01-05 00:08:14

您使用的是adminLTE模板嗎？ –

我只是找到了一個工作，圍繞並不可怕，雖然我幾乎想到這是在引導。

.modal-content { 
    overflow:hidden; 
}

來源

2017-01-31 22:24:09

bootstrap模式不是圓形的，而是正方形

回答

相關問題