html - 从父样式中排除 div

Question

我正在尝试覆盖 Bootstrap 中的 .container 类。我正在使用 Drupal 7，并且我的主题有一个 css 文件，在我想覆盖 .container

之前，它可以正常工作

我的 HTML

 <div class="main-container <?php print $container_class; ?>">
<div class="top-div" style=" width:100%;background-color: #676767; font-weight:bold; color:white;">
<div class="row" style="text-align:center;">
<div class="col-md-4"> text </div>
<div class="col-md-4"> text </div>
<div class="col-md-4"> text</div>
</div> 
</div>

该 PHP 代码将插入类 .container

我需要给 .top-div 类的 div 一个 100% 的大小，而 .container 没有任何填充我已经尝试了 child > 选择器和后代选择器和 :not(.top-div) 方法无效。当我使用 :not(.top-div) 时，它会在网站上的每个页面和元素以及包含 .top-div 的 div 上应用更改，这真的很奇怪。有什么建议吗？

Answer 1

在 Bootstrap 中，填充应用于容器，而不是内部 div。要在一个元素上覆盖它，您需要为其设置负水平边距。

类似于:

.container .top-div {
    margin-left:-10px;
    margin-right:-10px;
}

10px 应替换为 .main-container 上的填充。

如果这不能立即奏效，您可能需要更大的 specificity

Bootstrap 的内置.row 类uses this method