从父样式中排除 div

Question

我正在尝试覆盖引导程序中的 .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

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

Answer 1

在引导程序中，填充应用于容器，而不是内部 div。要在一个元素上覆盖它，您需要给它负水平边距。

类似：

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

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

如果这不能立即起作用，您可能需要更大的specificity

Bootstrap 的内置.row 类uses this method

Answer 2

你为什么不试试：

.main-container {
  position:relative;
}

.top-div {
  position:absolute;
  left:0;
  top:0;
}
    

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



    

Answer 3

如果您使用的是引导 css，则不需要提供任何自定义 css

您尝试在 top-div 类中添加 row 类

它是内置的 bootstrap.css，所以不需要任何额外的自定义 css。

.row {
  margin-left: -10px;
  margin-right: -10px;
}

示例

<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" 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>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<div class="main-container <?php print $container_class; ?>">
<div class="top-div row" 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>

希望这会对您有所帮助。