Question

媒体查询宽度不适用于col-md类。以下是我的代码。我正在使用最新版本的Bootstrap。

<div class = "col-md-8 article-container-fix">
    <div class = "articles" >
        <article class="clearfix">
            <header>
                line 1
                line 2
                line 3
            </header>
        </article>
    </div>
</div>

CSS代码

    @media(max-width: 1199px){

       .article-container-fix {

            width: 400px;
            margin-left: 1em;
            background: black;
            color: white;
         }

     }

除了宽度之外，所有其他三个属性都适用于此类“.article-container-fix”，但不适用于“width：400px”。我不知道我遗失了什么。

Answer 1

我建议你尝试使用 max-width 比1199少一些，就像720px一样，看它是否有效。输出此信息的其他方法如下

HTML：

<div class="col-md-8">
   <div class="article-container-fix">
      Content here!
   </div>
</div>

并使用您之前使用的相同CSS。它的引导程序很复杂，实际上可以按照你想要的方式获得一些东西，为此，它可能会干扰几乎任何东西。希望这对你有用。

Answer 2

ITS由于您已经使用article-container-fix课程编写了col-md-8课程。 col-md-8是一个Bootstrap框架类。默认情况下， bootstrap.css 中提供了默认宽度。

有两种方法可以解决这个问题：

您必须在媒体查询中写下!important，例如宽度：400px！important;

或者

您必须在 <head> 标记中重新定位您的CSS，在<head>标记中包含最后一个您的responsive.css。

媒体查询宽度不适用于col-md类？

2 个答案: