仅使用 Bootstrap 移动设备上的奇怪灰色按钮背景

Question

我有一个如下所示的导航：

    <nav class="text-center">
      <button class="btn nav-button color-house" type="button"><%= link_to "House", home_house_path, class: "color-house" %></button>
      <button class="btn nav-button color-spouse" type="button"><%= link_to "Spouse", home_spouse_path, class: "color-spouse" %></button>
      <button class="btn nav-button color-kids" type="button"><%= link_to "Kids", home_kids_path, class: "color-kids" %></button>
      <button class="btn nav-button color-neutral" type="button"><%= link_to "Blog", blogs_path %></button>
    </nav>

在计算机上运行良好：

但是由于某些奇怪的原因在移动设备上有一个奇怪的灰色背景：

奇怪的是，如果我尝试使用 chrome Inspector 的移动模拟器，它看起来完全没问题……图像仅在实际手机上显示为不需要的灰色。

到Heroku的网站链接是在这里如果你想看到实际的东西。

我觉得这必须是某种 Bootstrap 4 的东西，因为我从来没有在没有它的网站上经历过这种行为。

我试过background-color: white !important在btn和nav-button，但无济于事。我目前唯一的自定义 CSS 是这样的：

$color-house: #84C99A;
$color-spouse: #313E50;
$color-kids: #EFB0A1;
$color-neutral: #B7AD99;
$color-black: #26010C;

.color-house { color: $color-house; }
.color-spouse { color: $color-spouse; }
.color-kids { color: $color-kids; }
.color-neutral { color: $color-neutral; }
.color-neutral-hover:hover { color: $color-black; }

.nav-button a {
  font-family: $font-script;
  display: inline-block;
  font-size: 30px;
  padding-top: 10px;
  margin: 10px 10px 20px 10px;
  border-top: solid thin white;
  border-top: solid thin white;
}

@media screen and (max-width: 800px) {
  .nav-button a {
    margin: 10px 5px 30px 5px;
    font-size: 25px;
  }
}

Answer 1

向 .btn 类添加背景透明属性

.btn {background: transparent;}