1

我在 Laravel 5.4 应用程序中安装了 bootstrap 4 beta 3，方法是将 package.json 更改为使用“bootstrap”：“^4.0.0-beta”，而不是加载引导 v3 的条目。我还修改了 app.scss 文件和其他位置，以确保引用有关 css 和 js 的引导 v4 文件。

我在标题中遇到了一个问题，其中一个元素应用了 navbar-brand 类，因为它的大小合适。在检查该元素后，我发现“font-size: 2;” 在那里并被剔除为无效。单击指向 css 文件的链接，我看到这部分 css 显然缺少长度而不是 font-size 值。

.navbar-brand {
  display: inline-block;
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
  margin-right: 1rem;
  font-size: 2;
  line-height: inherit;
  white-space: nowrap;
}

那么，我错过了什么，或者这只是这个赌注 3 还没有准备好的情况？

4

1 回答 1

0

在 Bootstrap 4 beta 3 中，默认样式.navbar-brand如下：

.navbar-brand {
    display: inline-block;
    padding-top: $navbar-brand-padding-y;
    padding-bottom: $navbar-brand-padding-y;
    margin-right: $navbar-padding-x;
    font-size: $navbar-brand-font-size;
    line-height: inherit;
    white-space: nowrap;

    /* @include hover-focus */
}

的值$navbar-brand-font-size在文件中定义_variables.scss为：

$navbar-brand-font-size:      $font-size-lg !default;

以上在$font-size-lg同一文件中定义为：

$font-size-lg:                ($font-size-base * 1.25) !default;

最后，将默认值$font-size-base设置为1rem：

$font-size-base:              1rem !default;

默认情况下，所有这些都编译为font-size: 1.25rem;，这是可以在官方 Bootstrap cdn 提供的bootstrap.css文件中观察到的值。

所以，我猜这个值在你的代码中的某个地方被覆盖了。

于 2018-01-16T23:40:17.450 回答