Bootstrap4 container-fluid 在非 "div" 元素上

Question

使用 Bootstrap 4 阿尔法 5:

我正在尝试在不是 div 的 html 元素上使用 .container-fluid。出于某种原因，当它用于 NON-div 元素时，输出会发生变化。我的最终目标是为 application-specific HTML 元素定义 CSS 来表示类似应用程序 body 或 header 我可以 pre-style 和重用，从而不维护相同 CSS 的多个实例，也使我的 HTML 更具可读性。

这是我的测试代码，包含四个测试：

使用带有 div 和 class="container-fluid" 的标准方法：
使用名为 "test-body" 和 class="container-fluid" 的元素：
使用 SASS / Grunt 生成的 CSS 来调用 @include make-container()
使用 SASS / Grunt 生成的 CSS 来@extend .container-fluid

<div class="container-fluid mt-1 mx-2">
  <div class="row">
    <div class="col-xs-6 text-white bg-danger">regular div Left</div>
    <div class="col-xs-6 text-white bg-danger text-xs-right">regular div Right</div>
  </div>
</div>

<test-body class="container-fluid mt-1 mx-2">
  <div class="row">
    <div class="col-xs-6 text-white bg-danger">container-fluid attribute Left</div>
    <div class="col-xs-6 text-white bg-danger text-xs-right">container-fluid attribute Right</div>
  </div>
</test-body>

<!-- For the next two examples, see the -->
<!-- SCSS source code and compiled CSS lower in the post -->

<pm-body class="mt-1 mb-3 mx-2">
  <div class="row pm-decoration">
    <div class="col-xs-6">Sass @include make-container() Left</div>
    <div class="col-xs-6 text-xs-right">Sass @include make-container() Right</div>
  </div>
</pm-body>

<pm-header class="mt-1 mb-3 mx-2">
  <div class="row pm-decoration">
    <div class="col-xs-6">Sass @extend Left</div>
    <div class="col-xs-6 text-xs-right">Sass @extend Right</div>
  </div>
</pm-header>

下面的link是这段代码的输出：

Output from above code

DIV 示例是唯一一个按我预期的方式工作的示例。似乎只有当容器托管在 DIV 上时才会考虑边距。使用和不使用 $enable-flex.

我得到相同的输出

即使从学术角度来看答案是 "you can't do that,"，我也很想了解发生了什么。除了不使用原生 HTML DIV 元素来承载 CSS class.

之外，似乎没有可量化的差异

最近两次测试的参考资料：

后两个测试，可以看到SCSS源码和Grunt grunt出来后的CSS输出。颜色编码只是为了帮助验证 SASS 是否正确编译并被使用……要点是 @extend 和 @include。示例：

SCSS 对于@Include make-container:

pm-body{
    @include make-container();

    .pm-decoration{
        background-color: $pm-row-header-background;
        color: $pm-row-header-color;
        font-weight: bold;
    }
}

CSS @include make-container:

的输出

pm-body {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

pm-body::after {
  content: "";
  display: table;
  clear: both;
}

pm-body .pm-decoration {
  background-color: #DDE5FF;
  color: #6699FF;
  font-weight: bold;
}

SCSS 来自 @extend .container-fluid:

pm-header{
    @extend .container-fluid;

    .pm-decoration{
        background-color: $pm-app-border-blue;
        color: BLACK;
        font-weight: bold;
    }
}

CSS @extend 的输出。container-fluid:

.container-fluid, pm-header {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.container-fluid::after, pm-header::after {
  content: "";
  display: table;
  clear: both;
}

pm-header .pm-decoration {
  background-color: #BBCCFF;
  color: BLACK;
  font-weight: bold;
}

Answer 1

https://developer.mozilla.org/en/docs/Web/HTML/Block-level_elements

<div> 是块级元素，因此默认情况下它有 display: block; 作为默认显示属性。当您创建自定义元素类型时，如果您没有为其定义显示属性，则默认为 display: inline;。

因为 bootstrap css .container-fluid 假设元素是块级的（即 <div>），所以当你将它应用到非块级元素。

添加这个应该可以解决您面临的问题：

pm-header {
  display: block;
}

Bootstrap4 container-fluid 在非 "div" 元素上

Bootstrap4 container-fluid on non "div" element

css

sass

fluid-layout

bootstrap-4

responsive