Question

我无法改变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>

更新：我可以通过内联样式完成。这很难看，但有效！

Answer 1

.modal .modal-dialog { 
   width: 150px; 
   background-color: blue;
}

你忘了把px放在150年底。

Answer 2

确保您添加的类在 Bootstrap CSS文件之后加载 ...

Answer 3

错：

<link rel="stylesheet" href="/css/styles.css" />

正确：

<link rel="stylesheet" href="css/styles.css" />

Answer 4

尝试使用 ng-deep：

::ng-deep .modal .modal-dialog { 
    width: 150px; 
    background-color: blue;
}

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

4 个答案: