如何更改 Bootstrap 3 模态的 CSS 样式？答案

【问题标题】：How to change css style of a Bootstrap 3 modal?如何更改 Bootstrap 3 模态的 CSS 样式？
【发布时间】：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 的背景颜色。
更新：我可以通过内联样式做到这一点。这很丑陋，但有效！

标签： css twitter-bootstrap-3 stylesheet bootstrap-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 在引导之前加载。