Question

有什么方法可以让 jumbotron 类忽略来自Bootstrap 4的容器类？

我在PHP项目中使用MVC模式，并且我在每个页面上都包含标题以<main class="container">结束，但是对于主页我有一个我想要的jumbotron完全水平显示。由于主页的模板在主标签之后生成，因此jumbotron仅限于容器宽度。

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

.container:not(.jumbotron) {

}

任何建议都将不胜感激。提前谢谢！

Answer 1

在添加container课程的任何地方添加条件：如果您在主页上，请将container替换为container-fluid。

请注意，如果您希望该内容与您网站的其他内容一样，则应将.jumbotron内容的其余内容（<div class="container">...</div>之后的内容）包装好。

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

Answer 2

这样做的一种方法是使用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 3

我建议的一种可能方法是划分您的主页，例如，首先将您的jumbotron放在<table>标记中，以<table>标记放置您的<main class = "container">标记@TargetApi(Build.VERSION_CODES.LOLLIPOP) private void checkForUsageStatsPermission() { AppOpsManager appOps = (AppOpsManager) getActivity().getSystemService(Context.APP_OPS_SERVICE); int mode = 0; if (appOps != null) { mode = appOps.checkOpNoThrow(AppOpsManager.OPSTR_GET_USAGE_STATS, android.os.Process.myUid(), getActivity().getPackageName()); } if (mode != AppOpsManager.MODE_ALLOWED) { Intent intent = new Intent(Settings.ACTION_USAGE_ACCESS_SETTINGS); startActivity(intent); } }继续你的网络内容。祝你好运！

如何使一个元素忽略一个CSS引导类？

3 个答案: