gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 22:51:38 25 4
gpt4 key购买 nike

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

最佳答案

/*
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}}

关于css - 如何通过@media 使用内联样式 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59418821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com