Question

我注意到Bootstrap的form-control类不再保持display: inline-block一个屏幕宽度小于768px。为了覆盖这个我必须设置

.form-control {
  display: inline-block !important;
}

这是围绕CSS规则的唯一一个吗？我必须使用!important吗？我尝试给元素另一个类，比如display-inline-block和上面的CSS一样，除了没有!important，但它没有用。用!important覆盖Bootstrap感觉很奇怪，因为我被教导试图避免使用它，但还有其他方法吗？

Answer 1

正如您所看到的here display: block;声明应用于根目录的.form-control css类，因此，为了覆盖它，应该足够.form-control { display: inline-block; }在bootstrap inlude之后：

＆＃13;

<html>
      <head>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        
        <style>
          .form-control { 
            display: inline-block;
          }
        </style>
        
      </head>
      <body>

        <!-- INSPECT THIS ELEMENT -->
        <input class="form-control" />

      </body>
    </html>

＆＃13;

覆盖bootstrap默认值的选项

1 个答案: