Question

使用Bootstrap 4 alpha 5：

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

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

使用标准方法和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>

以下链接是此代码的输出：

Output from above code

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

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

最近两次测试的参考：

对于后两个测试，您可以在Grunt哼出来之后看到SCSS源代码和CSS输出。颜色编码只是为了帮助验证SASS编译正确并且正在使用......主要是@extend和@include。示例：

@Include制作容器的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;。

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

添加此项可以解决您遇到的问题：

pm-header {
  display: block;
}

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

1 个答案: