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的任何填充我已经尝试过这个孩子＆gt;选择器和后代选择器以及：not（.top-div）方法无效。当我使用：not（.top-div）时，它会对网站上的每个页面和元素以及包含.top-div的div进行更改，这非常奇怪。建议？

Answer 1

为什么不尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

类似的东西：

MainActivity

.container .top-div { margin-left:-10px; margin-right:-10px; }应该由10px上的填充替换。

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

Bootstrap的内置.main-container课程uses this method

Answer 3

如果你使用bootstrap css而不是你不需要提供任何自定义css

您尝试在$(document).ajaxComplete(function () { if(currentPage == 'page2'){ $('#test1').click(function () { console.log('page2'); }); /*$('#test2').click(function () { console.log('page2'); });*/ } });班级

中添加row班级

它内置于top-div所以不需要任何额外的自定义CSS。

bootstrap.css

示例

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

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

希望这会对你有所帮助。

从父样式中排除div

3 个答案: