bootstrap4.1.3 cdnがGoogle Chromeでだけcssが効かない

なぜかボタンのclass="btn"などのbootstrap4のcssが、Chromeでだけ効きません。

safariでは効いています。

サイトのURLです。
https://hufurima.com/search/product/

ソースコードは、おおよそ以下のようになります。

html
1{% load static %}
2<!DOCTYPE html>
3<html lang="ja">
4  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
5      <meta charset="UTF-8">
6      <meta name="viewport" content="width=device-width,initial-scale=1">
7    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
9    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
10    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
11    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
12  </head>
13  <body>
14    <header>
15      {% include "header.html" %}
16    </header>
17    <main>
18      {% block content %} {% endblock %}
19    </main>
20  </body>
21</html>
22

退会済みユーザー

2018/08/11 14:41

bootstrap.min.css が二回読み込みされてますよ

tetsutail

2018/08/11 14:45

すいません。それは間違ったコードでした。実際のコードは1回しか読み込んでいませんでした

行動規範の内容に同意します

回答2件

ベストアンサー

多分このエラーが原因じゃないの？

html
1<button type="submit" class="btn">検索</button>

class に btn しかついてない。

リファレンスを見ればわかることだが、
https://getbootstrap.com/docs/4.1/components/buttons/

html
1<button type="submit" class="btn btn-primary">検索</button>

このように使うことが書かれている。

投稿2018/08/11 14:45

編集2018/08/11 14:56

退会済みユーザー

総合スコア0

tetsutail

2018/08/11 14:47

ご指摘ありがとうございます！ safariでは動くことと関係はありそうでしょうか？素人で全く分からずすみません…

退会済みユーザー

2018/08/11 14:49

一つ一つ問題を解消してください。コンソール開くだけで特定できるのですから。それでも問題が解消できなければ他の原因を疑う。

tetsutail

2018/08/11 14:56 編集

このエラーに関しては、そもそもファイルが存在しないということでした。なので、必要なcssが反映されていないということではなさそうでした。無知で申し訳ないのですが、もしかしてbootstrap4のボタン等のcssは、chromeだとこのように表示されるので問題ないのでしょうか？

退会済みユーザー

2018/08/11 14:57

「そもそもファイルが存在しない」　そうなら、404 エラーになります。 403 なので権限エラーです。なのでファイルは存在しています。

tetsutail

2018/08/11 15:02

すみません。説明が間違っていました。今は必要のなくなってしまったファイルなので、そのcssは、もう読み込む必要がなくなっています。なので、今は権限がなくなっていて、403になっています

tetsutail

2018/08/11 15:06

追記ありがとうございます！ btnだけではダメだったんですね。勉強不足ですみません。デバッグの手順の基本まで指摘していただきありがとうございます！まだ疑問はありますが、なんとか解決していけそうです。

退会済みユーザー

2018/08/11 16:44 編集

> 「まだ疑問はありますが、」なぜ動きが違うように見えるのかと言うことだろうが、結論を言えば、「cssでのtransparent」の扱いが異なっていることが原因です。開発ツールを見れば、 btn だけを指定したとき、background-color: transparent が設定される。 Chrome の場合は、背後のオブジェクトの白が透過されて白くなり、Safari は背後のオブジェクトではなくブラウザの背景色が透過されて見えていると言う違いです。むしろ正しく動いていないのはSafariの方ですね。

行動規範の内容に同意します