如何通过 @media 使用内联样式 CSS答案

【问题标题】：How to use inline styling CSS with @media如何通过 @media 使用内联样式 CSS
【发布时间】：2019-12-20 01:22:25
【问题描述】：

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%}}

【问题讨论】：

不能内联媒体查询...
我试过给“.container” div 一个 id 属性，但这根本没有任何区别。

标签： css overriding media bootstrap.min.css

【解决方案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}}

【讨论】：

!important 不是一个好习惯...在 bootstrap.css 之后加载你的 CSS，你的 CSS 将覆盖 botstrap
我在文件中也试过了，但没有效果。
目前在bootstrap.css之后加载
虽然 !important 不是最佳实践，但我认为如果您不想为您的 div 提供额外的类，最好这样做