Html 从父样式中排除div

我试图覆盖引导中的

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

为什么不试试：


.main容器{
位置：相对位置；
}
.上分区{
位置：绝对位置；
左：0；
排名：0；
}

为什么不试试：


.main容器{
位置：相对位置；
}
.上分区{
位置：绝对位置；
左：0；
排名：0；
}

在引导中，填充应用于容器，而不是内部div。若要在一个元素上覆盖此项，需要为其提供负水平边距

比如：

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

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

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

Bootstrap的内置
.row
类
在Bootstrap中，填充应用于容器，而不是内部div。若要在一个元素上覆盖此项，需要为其提供负水平边距

比如：

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

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

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

Bootstrap的内置
.row
类
如果您使用的是Bootstrap css，则不需要提供任何自定义css

您尝试只在
顶部div
类中添加
行
类

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

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

您尝试只在
顶部div
类中添加
行
类

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

我们能看到你目前使用的CSS吗？没有什么特别的
.container>.top div{padding right:0px！important；padding left:0px；}
就像我说的那样，我试过了>和后代：not（）我们能看到你目前使用的CSS吗？没有什么特别的
容器>.top div{padding right:0px！important；padding left:0px；}
就像我说的，我尝试了>和后代和：not（），因为我需要页面其余部分的填充效果，但不需要这个特殊的div。@MarwanAK好的，我编辑了答案，因为我没有意识到这就是你想要的。当然，这是有效的。为什么我还没想到这个lol。。。我想我在找更简单的东西。谢谢如果没有更令人信服的答案出现，我会选择一点作为最佳答案：）因为我需要页面其余部分的填充效果，但没有这个特殊的分区。@MarwanAK Ok，我编辑了答案，因为我没有意识到这是你要找的。这当然有效。为什么我还没想到这个lol。。。我想我在找更简单的东西。谢谢如果没有更令人信服的答案出现，我会选择一点作为最佳答案：）我这样做了，它是有效的，但我认为这不是最佳实践？在这种情况下，当只应用于单个元素时，这是最不可能导致可维护性问题的解决方案。我所做的是将div的宽度设置为100%以上，然后执行
左边距：-15px
，因为出于某种原因
左边距
有效果，而
右边距
没有效果。尝试设置右边距：-10px！重要信息
。如果这样做有效，您就知道您只需要一个更具体的选择器。
.row
确实有负边距true。我试着使用
！重要的
和它没有帮助，但是我交换了标记的顺序，将div放在
.row
中，而不是
.row
中，它工作了：）谢谢。我这样做了，它工作了，但我认为这不是最佳实践？在这种情况下，当只应用于单个元素时，这是最不可能导致可维护性问题的解决方案。我所做的是将div的宽度设置为100%以上，然后执行
左边距：-15px
，因为出于某种原因
左边距
有效果，而
右边距
没有效果。尝试设置右边距：-10px！重要信息
。如果这样做有效，您就知道您只需要一个更具体的选择器。
.row
确实有负边距true。我试着使用
！重要的
和它没有帮助，但是我已经交换了标记的顺序，将div放在
.row
中，而不是
.row
中，它工作了：）谢谢。是的，这就是@Alexander Gottlieb和我刚刚得出的结论，它工作时没有向样式表添加任何内容，因为
.row
是一个类为了基本上否定
.container
填充，他还提供了一个非常有用的链接。谢谢你，你的答案是最接近他的答案这是@Alexander Gottlieb和我刚刚得出的结论，它在不向样式表添加任何内容的情况下工作，因为
。row
是一个基本上否定
。container
填充的类。他还提供了一个非常有用的链接。谢谢你，你的回答是最接近他的