Question

我在CSS中应用了媒体查询来改变宽度但是没有工作，它没有超过预定义的CSS 我需要改变我的容器的宽度任何解决方案

＆＃13;

 @media (min-width:640px) and (max-width: 768px) {
    .container{
    	width: 674px;
    	max-width: 100%;
    }
    }

＆＃13;

Answer 1

正如其他人在评论中所解释的那样，获得所需内容的最简单方法是在样式值之后添加!important。请参阅下面的代码段，了解它是如何完成的。但请注意，经常不鼓励使用!important。

我添加了color: red只是为了让你更容易发现你的风格被应用。

＆＃13;

@media (min-width:640px) and (max-width: 768px) {
    .container{
    	width: 674px !important;
    	max-width: 100% !important;
      color:red;
    }
  }

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  Labore assumenda ipsa ea doloremque et. Est ipsam sint rem est numquam. Cum maiores officia quam. At sapiente cum quidem sit et.
Aut atque aut eligendi aut. Quo id dolorum saepe consequatur eum. Rem quos qui qui.
Aut accusantium provident cum occaecati quia rerum et doloremque. Quo quibusdam adipisci mollitia qui quia. Voluptatem quis nisi at culpa nostrum mollitia enim assumenda. Rem saepe voluptates quas quia dolorem.
Nulla eum alias vel sequi recusandae alias nobis. Est possimus quos non aut consequuntur. Debitis inventore est quis fugit in deserunt excepturi ducimus. Nihil quibusdam odio et nulla voluptatem ut. Qui ullam ut vitae eos et at qui perferendis.
Qui aut rerum dolores vitae. Vitae aut quaerat eligendi ut sed. Soluta suscipit repellendus ad maiores quia et sequi. Omnis molestiae explicabo perferendis beatae et. Autem qui fuga esse beatae
</div>

＆＃13;

一种更好的方法是在bootstrap的样式之后添加样式，以便它们优先于bootstrap的默认值。请参阅此内容以详细了解样式表在浏览器中的优先级：In which order do CSS stylesheets override?

在下面的代码段中，我在导入bootstrap CSS的link标记之后添加了自定义样式表。因此，自定义样式表优先于bootstrap。

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  @media (min-width:640px) and (max-width: 768px) {
    .container{
    	width: 674px;
    	max-width: 100%;
      color:red;
    }
  }
</style>

<div class="container">
  Labore assumenda ipsa ea doloremque et. Est ipsam sint rem est numquam. Cum maiores officia quam. At sapiente cum quidem sit et.
Aut atque aut eligendi aut. Quo id dolorum saepe consequatur eum. Rem quos qui qui.
Aut accusantium provident cum occaecati quia rerum et doloremque. Quo quibusdam adipisci mollitia qui quia. Voluptatem quis nisi at culpa nostrum mollitia enim assumenda. Rem saepe voluptates quas quia dolorem.
Nulla eum alias vel sequi recusandae alias nobis. Est possimus quos non aut consequuntur. Debitis inventore est quis fugit in deserunt excepturi ducimus. Nihil quibusdam odio et nulla voluptatem ut. Qui ullam ut vitae eos et at qui perferendis.
Qui aut rerum dolores vitae. Vitae aut quaerat eligendi ut sed. Soluta suscipit repellendus ad maiores quia et sequi. Omnis molestiae explicabo perferendis beatae et. Autem qui fuga esse beatae
</div>

＆＃13;

在引导程序媒体查询不起作用

1 个答案: