css - 在引导媒体查询中不起作用

Question

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

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

Answer 1

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

我添加了一个 color: red 只是为了在应用您的样式时更容易发现。

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

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

更好的方法是在 Bootstrap 的样式之后添加您的样式，以便它们优先于 Bootstrap 的默认样式。查看此内容以了解有关样式表如何在浏览器中确定优先级的更多信息:In which order do CSS stylesheets override?

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

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