質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

392閲覧

Bootstrapの基本でわからない部分があります

kkbeams

総合スコア17

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/16 02:42

前提・実現したいこと

https://www.youtube.com/watch?v=9cKsq14Kfsw&t=324s

Youtubeのこの動画で「Bootstrap」の勉強をしているのですが、最初のナビゲーション部分で「ulタグ」部分がアイコンの下に来てしまい。右端に寄りません。

コードはそのまま写しているのですが、上手くいきません。
原因と解決策を教えていただければ幸いですm(__)m

該当のソースコード

html

1<body> 2 <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"> 3 <div class="navbar-brand"> 4 <div class="container-fluid"> 5 <a href="#"> 6 <img src="img/logo.png"> 7 </a> 8 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> 9 <span class="navbar-toggler-icon"></span> 10 </button> 11 <div class="collapse navbar-collapse" id="navbarResponsive"> 12 <ul class="navbar-nav ml-auto"> 13 <li class="nav-item active"><a href="#" class="nav-link">Home</a></li> 14 <li class="nav-item"><a href="#" class="nav-link">About</a></li> 15 <li class="nav-item"><a href="#" class="nav-link">Services</a></li> 16 <li class="nav-item"><a href="#" class="nav-link">Team</a></li> 17 <li class="nav-item"><a href="#" class="nav-link">Connect</a></li> 18 </ul> 19 </div> 20 </div> 21 </div> 22 </nav> 23</body>

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/05/16 02:46

タイトルはあまり汎用的にしてしまうと同じようなタイトルが並び、タイトルだけで要件が伝わりづらくなりますので、なるべくもっと質問内容に寄せた内容してくださればと(起きている問題、実現したいことなど)
guest

回答2

0

ベストアンサー

ulタグやその他の中身が全て、 .navbar-brand の中に入ってしまって、親子関係になっていますね。
button.navbar-toggler と、 div.navbar-collapse は .navbar-brand と兄弟関係にしてあげてください。

投稿2019/05/16 05:59

uemaSR

総合スコア257

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kkbeams

2019/05/16 07:14

ありがとうございます!
guest

0

今回.navbar-brandに該当するのはロゴの箇所かと思いますので、以下のような記述になるかと思います。

html

1<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top"> 2 <div class="container-fluid"> 3 <a class="navbar-brand" href="#"><img src="img/logo.png"></a> 4 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"><span class="navbar-toggler-icon"></span></button> 5 <div class="collapse navbar-collapse" id="navbarResponsive"> 6 <ul class="navbar-nav ml-auto"> 7 <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> 8 <li class="nav-item"><a class="nav-link" href="#">About</a></li> 9 <li class="nav-item"><a class="nav-link" href="#">Services</a></li> 10 <li class="nav-item"><a class="nav-link" href="#">Team</a></li> 11 <li class="nav-item"><a class="nav-link" href="#">Connect</a></li> 12 </ul> 13 </div> 14 </div> 15</nav>

参考サイト:
とほほのBootstrap 4入門 - ナビゲーションバー
http://www.tohoho-web.com/bootstrap/navbar.html

投稿2019/05/16 03:04

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kkbeams

2019/05/16 07:14

ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問