css - 如何通过@media 使用内联样式 CSS

Question

Bootstrap.min.css 覆盖了我在外部 CSS 文件中编写的所有内容。内联似乎是唯一覆盖 Bootstrap 的东西。有谁知道如何将以下 CSS 脚本与内联脚本一起使用？

@media (min-width:768px){.container{width:80%}}
@media (min-width:992px){.container{width:80%}}
@media (min-width:1200px){.container{width:80%}}

Answer 1

/*
Uncomment for option 1
@media (min-width:768px){.container{width:50% !important}}
@media (min-width:992px){.container{width:50% !important}}
@media (min-width:1200px){.container{width:50% !important}}
*/
/*Option 2.. own style*/
@media (min-width:768px){.myclass{width:50% !important}}
@media (min-width:992px){.myclass{width:50% !important}}
@media (min-width:1200px){.myclass{width:50% !important}}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='container' style='background-color:red'>Hi Option 1</div>
<div class='container myclass' style='background-color:red'>Hi Option 2</div>

这应该覆盖 Bootstrap 样式(!重要)

@media (min-width:768px){.container{width:80% !important}}
@media (min-width:992px){.container{width:80% !important}}
@media (min-width:1200px){.container{width:80% !important}}