从父样式中排除 div

Question

我正在尝试覆盖 bootstrap 中的 .container class。我正在使用 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 代码将插入 class .container

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

Answer 1

你为什么不试试：

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

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

类似于：

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

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

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

Bootstrap的内置 .row class uses this method

Answer 3

如果您使用的是 bootstrap css，则无需提供任何自定义 css

您尝试在 top-div class

中添加 row class

它是内置的 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>

希望这对您有所帮助。

从父样式中排除 div

exclude div from parent style

html

css

drupal-7