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

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

ただいまの
回答率

90.32%

  • jQuery

    7113questions

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

  • CSS

    6209questions

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

  • HTML5

    4305questions

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

  • Bootstrap

    1039questions

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

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 779

hidepon

score 165

コード

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;
  }
}

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

nav .container-fluid,
.navbar-collapse {
  padding-left: 0px;
  padding-left: 0px;
}
.navbar-brand {
  display: none;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/08 16:30

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

    キャンセル

  • 2017/03/09 10:20

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

    キャンセル

  • 2017/03/09 10:38

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

    キャンセル

  • 2017/03/09 10:46

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

    キャンセル

  • 2017/03/09 12:47

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

    キャンセル

  • 2017/03/09 13:22

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

    キャンセル

  • 2017/03/09 13: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;
    }
    }
    有難うございました。

    キャンセル

同じタグがついた質問を見る

  • jQuery

    7113questions

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

  • CSS

    6209questions

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

  • HTML5

    4305questions

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

  • Bootstrap

    1039questions

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