2017-02-26 10 views
1

メニュー項目を右に揃える方法を考えましたが、サイズを変更するとnavbar-togglerが表示されません。ブートストラップ4 navはサイズ変更時にハンバーガーを表示しません

コード:

<nav class="navbar navbar-toggleable-md"> 
    <a asp-controller="Home" asp-action="Index" class="navbar-brand"> 
     <img class="brand_img" src="/Graphic/logo.jpg" style="margin-left:-1px;margin-right:6px;" /> 
     <span class="brand_name">Lundbeck Consulting</span> 
    </a> 
    <button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarFullCollapse" > 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse justify-content-end" id="navbarFullCollapse"> 
     <div class="nav navbar-nav"> 
      <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="About">Om LC</a> 
      <a class="nav-item nav-link navbar_item" asp-controller="Project" asp-action="Index">Prosjekter</a> 
      <a class="nav-item nav-link navbar_item" asp-controller="Home" asp-action="Contact">Kontakt</a> 
     </div> 
    </div> 
</nav> 

事前にデモ用http://core.lundbeckconsulting.no

感謝をご覧下さい!

答えて

0

コードは問題ありませんが、jsの読み込みで何かが発生する可能性があるため、タグを開いた直後にドキュメントに置き換えてボタンを置き換えます。

編集:私はもう一度あなたのウェブサイトを検査し、右上のボタンを見つけました!今は色と位置を変えるだけです。ウィンドウのサイズが変更されている間、google chrome dev tools(f12)を使用して検索してください。

+0

私のコードを見ていただきありがとうございます。今すぐボタンを見つけることができます。しかし、私はnavbar-toggler-iconが有名なハンバーガーをレンダリングすると思った。どのように色を変えるのですか?私は色を試しました:黒、しかしそれは何もしませんでした.. – SteinTheRuler

+0

ブートストラップ4は、もはや文字を使用するのではなく、アイコンの画像を使用します。 BACKGROUND-colorとborder-colorを変更してみてください。 –

+0

背景と罫線は変更できますが、中央の3行には影響しません。おそらく、それは単にカスタム画像を使用するより簡単です..? – SteinTheRuler

2

ハンバーガーはありますが、Navbarが背景色を必要とするため、またはトグルアイコンの色を変更するため、ハンバーガーが表示されません。

<nav class="navbar navbar-toggleable-md bg-light navbar-light"> 
    .. 
</nav> 
  • 使用navbar-dark

更新2018 /暗灰色リンクとトグラーを生成するために使用navbar-light

  • 光/白色リンクとトグラーを生成する - ブートストラップ4.0.0navbar-toggleable-navbar-expand-に変更されましたが、navbar-light/darkの色は同じように機能します。

  • 関連する問題