如何将内联样式CSS与@media一起使用

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样式（！important）

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