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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

CSS

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

Q&A

解決済

1回答

3074閲覧

bootstrapでnavbar で一番左側のタイトル部分を削除すると生じる隙間を削除したい

hidepon

総合スコア206

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

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

CSS

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

0グッド

0クリップ

投稿2017/03/08 05:53

編集2017/03/09 03:40
コード ```bootstrapでnavbar で一番左側のタイトル部分を削除すると生じる隙間を削除したいのですが、どのようにしたらよいでしょうか? 新たにCSSの内容を上書きするstyle.cssを作成して打ち消しながらレイアウトをしています。
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">タイトル</a> </div> <div class="collapse navbar-collapse" id="navbarEexample"> <ul class="nav navbar-nav"> <li class="active"><a href="#">メニューA</a></li> <li><a href="#">メニューB</a></li> <li><a href="#">メニューC</a></li> </ul> </div> </div> </nav> ``` の <a class="navbar-brand" href="#">タイトル</a> を削除すると 左端にスペースが生じます。 これを削除しようとしていますが、うまくいきません。 上書きするcssファイルに padding:0;などを設定していますが。 まだ残っています。 どのようにしたらよいでしょうか? Tggle メニューが崩壊してしまったりしています。

下記のようにスマホ以外の場合にCSSファイル情報を上書きしてToggleメニューが崩れないように設定をしたつもりなのですが・・・崩れてしまいます。
PC、タブレットサイズはToggle メニューが表示されないので、影響は受けていません。

@media only screen and (min-width : 480px) { nav .container-fluid, .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } @media only screen and (min-width : 768px) { nav .container-fluid, .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } @media only screen and (min-width : 992px) { nav .container-fluid, .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } @media only screen and (min-width : 1200px) { nav .container-fluid, .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } }

ご教授頂ければ幸いです。
どのようにしたらよいの

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

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

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

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

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

guest

回答1

0

ベストアンサー

他に影響が無いか念の為確認して下さい。

css

1nav .container-fluid, 2.navbar-collapse { 3 padding-left: 0px; 4 padding-left: 0px; 5} 6.navbar-brand { 7 display: none; 8}

投稿2017/03/08 06:15

yuki84web

総合スコア1857

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

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

hidepon

2017/03/08 07:30

ザックリと検証してOKかと思いきや、スマホのサイズにした際に崩れたりしていました。ちょっと考えてみます。有難うございました。
hidepon

2017/03/09 01:20

Toggle menuが崩壊してしまいました・・・。
yuki84web

2017/03/09 01:38

スマホサイズで崩れるのはpaddin-leftを0にしたことが原因ですね。 メディアクエリでToggle menuを表示しないレイアウトの時だけ適用するようにすれば良いでしょう。
hidepon

2017/03/09 01:46

ああーーーなるほど。ちょおおおと試してみます
hidepon

2017/03/09 03:47

メディアクエリをザクッと書きましたが、いまだに解決しませんね・・・・orz
hidepon

2017/03/09 04:22

メディアクエリの書き方間違っていました。
hidepon

2017/03/09 04:23

正しいのはこれですね @media screen and (min-width: 1200px) { .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } @media screen and (max-width: 1199px) { .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } /* col-sm- 991px 以下 */ @media screen and (max-width: 991px) { .navbar-collapse { padding-left: 0px; } .navbar-brand { display: none; } } 有難うございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問