Как изменить стиль css Bootstrap 3 модальный?

Я не могу изменить стиль Bootstrap 3 модалов.Как изменить стиль css 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>

Update: Я могу сделать это с помощью встроенного стиля. Это уродливо, но работает!

источник

2016-05-08 Natanael

Я рекомендую открыть окно разработчика для Chrome, Safari или FireFox, чтобы выяснить, почему ваши стили не применяются. Все три браузера должны поддерживать 'Right Click >> Inspect Element', который будет показывать стили, применяемые (или перезаписываемые) для выбранного элемента. – ManBearPixel

Поскольку я открываю файл с моего рабочего стола, а не с сервера, я использую Firefox. Элемент «Осмотр» ничего не показывает. Я могу изменить цвет фона таких компонентов, как Alert, но не могу изменить цвет фона Modal. – Natanael

Обновление: я могу сделать это через встроенный стиль. Это уродливо, но работает! – Natanael

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

Вы забыли поставить точки в конце 150.

источник

2016-05-08 23:03:15 Alqin

Спасибо! Я уже исправил это. Но это не причина проблемы. – Natanael

Хорошо. Возможно, это предложение @Sators, ваш css загружается перед загрузкой. – Alqin

Убедитесь, что классы, которые вы добавляете загружаются после СМЧ файла Bootstrap ...

источник

2016-05-08 23:03:41 Sators

Да, мой файл css объявлен после файлов bootstrap. – Natanael

Неправильно:

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

Правильно:

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

источник

2016-05-09 15:25:21 Natanael

Как изменить стиль css Bootstrap 3 модальный?

ответ

Смежные вопросы