非“div”元素上的 Bootstrap4 容器流体

Question

使用 Bootstrap 4 alpha 5：

我正在尝试在不是 div 的 html 元素上使用 .container-fluid。由于某种原因，当它用于非 div 元素时，输出会发生变化。我的最终目标是为特定于应用程序的 HTML 元素定义 CSS，以表示我可以预先设置样式和重用的应用程序主体或标题之类的东西，从而不维护相同 CSS 的多个实例，并使我的 HTML 更具可读性。

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

1. 使用带有 div 和 class="container-fluid" 的标准方法：
2. 使用名为“test-body”的元素和class="container-fluid"：
3. 使用 SASS / Grunt 生成的 CSS 调用 @include make-container()
4. 使用 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>

下面的链接是这段代码的输出：

Output from above code

DIV 示例是唯一一个按我期望的方式工作的示例。似乎只有当容器托管在 DIV 上时，才会尊重边距。使用和不使用 $enable-flex 时，我得到相同的输出。

即使答案是“你不能那样做”，从学术的角度来看，我真的很想了解发生了什么。除了不使用原生 HTML DIV 元素来托管 CSS 类之外，似乎没有可量化的差异。

---

最后两个测试的参考：

对于后两个测试，您可以看到 Grunt 咕哝出来后的 SCSS 源代码和 CSS 输出。颜色编码只是为了帮助验证 SASS 是否正确编译并正在使用……重点是 @extend 和 @include。例子：

@Include make-container 的 SCSS：

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

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

@include make-container 的 CSS 输出：

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

来自@extend .container-fluid 的SCSS：

pm-header{
    @extend .container-fluid;

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

@extend .container-fluid 的 CSS 输出：

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

由于引导 css .container-fluid 假设元素是块级（即<div>），因此当您将其应用于非块级元素时它会中断。

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

pm-header {
  display: block;
}