如何让元素忽略 css Bootstrap class？

Question

有什么方法可以让 jumbotron class 忽略 container class，来自 Bootstrap 4?

我在 PHP 项目中使用 MVC 模式，并且我在每个页面上都包含 header 以 <main class="container"> 结尾，但是对于主页我有一个超大屏幕，我想完全水平显示。由于主页模板在主标记之后生成，因此超大屏幕被限制为 容器的 宽度。

我试过 :not() 选择器，但它不起作用。

.container:not(.jumbotron) {

}

如有任何建议，我们将不胜感激。提前致谢！

Answer 1

一种方法是使用 jQuery 的 insertBefore() 方法。

var html = '<div class="jumbotron"><h1>Hello World</h1><p>I\'m the mighty jumbotron</p></div>';

var target = $('.container');

$(html).insertBefore(target);

body {
border:1px solid green;
text-align:center;
}
main.container {
border:1px solid red;
width:300px;
height:200px;
margin:0 auto;
display:block;
}

.jumbotron {
  width:100%;
  display:block;
  border:2px solid blue;
  height:200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Green is the body</p>
<main class="container">
<h3>The main .container div</h3>
</main>

Answer 2

我可以建议的一种可能方法是划分您的主页，例如，首先将您的 jumbotron 放在 <table> 标签中，以任何您想要的方式放在 <table> 标签下方，将您的 <main class = "container"> 并继续在其中处理您的网络内容。祝你好运！

Answer 3

在添加 container class 的地方设置一个条件：如果您在主页上，请将 container 替换为 container-fluid。

请注意，如果您想让其余内容（.jumbotron 之后的内容）看起来像您网站的其余部分，则应将其包裹在 <div class="container">...</div> 中。

您可以在页面加载后使用 JavaScript/jQuery 动态执行此操作，但必须特别注意限制或隐藏任何 FOUC 效果（内容回流）。

如何让元素忽略 css Bootstrap class？

How to make an element ignore a css Bootstrap class?

html

css

twitter-bootstrap-4