如何更改 Bootstrap 3 模态的 CSS 样式？
Posted
技术标签:
【中文标题】如何更改 Bootstrap 3 模态的 CSS 样式？【英文标题】：How to change css style of a Bootstrap 3 modal? 【发布时间】：2016-09-03 11:51:13 【问题描述】：我无法更改 Bootstrap 3 模态的样式。
我在我的 css 文件中试过这个：
.modal .modal-dialog
width: 150px;
background-color: blue;
但我没有得到任何结果。
为什么它不起作用？以及如何更改 Bootstrap 3 模式？
这是可能的头部标签：
<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!--<meta name="csrf-token" content="">-->
<title>Home</title>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<!-- jQueryUI -->
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<!-- Optional theme -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />-->
<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- React -->
<script src="js/react/build/react.js"></script>
<script src="js/react/build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<!-- App Styles -->
<link rel="stylesheet" href="/css/styles.css" />
<!-- jQueryMask -->
<script src="js/jquery.mask.js"></script>
</head>
更新：我可以通过内联样式做到这一点。这很丑陋，但有效！
【问题讨论】：
我建议打开 Chrome、Safari 或 FireFox 的开发人员窗口，以调查您的样式未应用的原因。所有三个浏览器都应该支持Right Click >> Inspect Element，它将显示为所选元素应用（或覆盖）的样式。
当我从桌面而不是服务器打开文件时，我使用的是 Firefox。检查元素显示任何相关内容。我可以更改 Alert 等组件的背景颜色，但无法更改 Modal 的背景颜色。
更新：我可以通过内联样式做到这一点。这很丑陋，但有效！
【参考方案1】：
尝试使用ng-deep：
::ng-deep .modal .modal-dialog
width: 150px;
background-color: blue;
【讨论】：
【参考方案2】：错误：
<link rel="stylesheet" href="/css/styles.css" />
正确：
<link rel="stylesheet" href="css/styles.css" />
【讨论】：
【参考方案3】：确保您要添加的类在 Bootstrap CSS 文件之后加载...
【讨论】：
是的，我的 css 文件是在 bootstrap 的文件之后声明的。【参考方案4】：.modal .modal-dialog
width: 150px;
background-color: blue;
你忘了把 px 放在 150 的末尾。
【讨论】：
谢谢！我已经纠正了。但这不是问题的原因。 好的。也许是@Sators 的建议，你的 css 在引导之前加载。以上是关于如何更改 Bootstrap 3 模态的 CSS 样式？的主要内容，如果未能解决你的问题，请参考以下文章
更改 ng-bootstrap UI 中的模态大小（角度 2）