ナビゲーションバーのヘッダーボタンは、中サイズの画面で長い

Question

大画面（グッド）

ミディアムスクリーン（悪い）

スモールスクリーン（グッド）

スモールスクリーンボタンドロップダウンを（取得します悪い）

私はplunkrを作ってみましたが、私はまだリンクしますが、それは大量のエラーが発生していますが、それには私のCSSとHTMLが含まれているので、まだそれを見ることができます。私はモバイルレスポンスのnavbarを作ろうとしています。なぜなら何らかの理由で中程度のサイズの画面を見ると、ボタンは1000 + pxの長さになり、膨大な量の部屋を占有します。クロム開発ツールで計算されたタブを試してみましたが、巨大な幅の原因となっているものは表示されません。また、それは小さな画面でもドロップダウンに幅があります。

HTML：

<section class="navbarheader"> 
      <div class="navbar navbar-default navbar-fixed-top" style="z-index: 10"> 
       <div class="container-fluid"> 
        <!--Navbar Brand--> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#desktop-nav"> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
         </button> 
         <a href="/" class="navbar-brand"> 
          <span class="navbarLogo"> 
           <img src="/images/propulstion%20navigation-bar-logo.png" /> 
          </span> 
         </a> 
        </div> 
        <!--End of Navbar Brand--> 
        <!--Desktop Navbar--> 
        <div id="desktop-nav" class="collapse navbar-collapse"> 
         <ul class="nav navbar-nav navbar-right"> 
          <!--Settings Dropdown--> 
          <li id="settings" class="dropdown" uib-dropdown> 
           <a href="javascript:void(0);" class="nav-icon dropdown-toggle" uib-dropdown-toggle tooltip="Settings" tooltip-placement="bottom"> 
            <span class="mdi mdi-settings"></span> 
           </a> 
           <ul uib-dropdown-menu class="dropdown-menu"> 
            <li class="dropdown-header">Settings</li> 
            <li><a href="@Url.Action("Index", "SiteSettings", new { Area = "SiteSettings" })"><span>Site Settings</span></a></li> 
            <li><a href="@Url.Action("Index", "SiteAdmin", new { Area = "Administration" })"><span>Site Administration</span></a></li> 
           </ul> 
          </li> 
          <!--End of Settings Dropdown--> 
          <!--LoginPartial Dropdown--> 
          <li id="loginDropDown" class="dropdown hidden-md" uib-dropdown>@Html.Partial("_LoginPartial") </li> 
          <!--End of LoginPartial Dropdown--> 
         </ul> 
        </div> 
        <!--End of Desktop Navbar--> 
        <!--Mobile NavBar--> 
        @*<div id="mobile-nav" class="visible-xs-block"> 
         <div class="dropdown open mobilenav-download-menu"> 
          <ul class="dropdown-menu"> 
           <li class="dropdown" uib-dropdown> 
            <a href="javascript:void(0);" class="nav-icon dropdown-toggle" uib-dropdown-toggle tooltip="Settings" tooltip-placement="bottom"> 
             <span class="mdi mdi-settings"></span> 
            </a> 
            <ul uib-dropdown-menu class="dropdown-menu"> 
             <li class="dropdown-header">Settings</li> 
             <li><a href="@Url.Action("Index", "SiteSettings", new { Area = "SiteSettings" })"><span>Site Settings</span></a></li> 
             <li><a href="@Url.Action("Index", "SiteAdmin", new { Area = "Administration" })"><span>Site Administration</span></a></li> 
            </ul> 
           </li> 
          </ul> 
         </div> 
        </div>*@ 
        <!--End of Mobile NavBar--> 
       </div> 
      </div> 
     </section> 

オーケー、私はplunkrをリンクするコードが必要と言って、エラーを取得しています。

Answer 1

navbarheaderのブートストラップに似たスタイリングを手動で定義することができます。 CSSファイルにこれらのスタイリングを追加して、クラスのいずれかまたはそれ以上を使用してください。エレメント

@media (min-width: 1000px) { 
 
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
 
    float: left; 
 
    position: relative; 
 
    min-height: 1px; 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
} 
 
    .col-md-12 { 
 
    width: 100%; 
 
    } 
 
    .col-md-11 { 
 
    width: 91.66666667%; 
 
    } 
 
    .col-md-10 { 
 
    width: 83.33333333%; 
 
    } 
 
    .col-md-9 { 
 
    width: 75%; 
 
    } 
 
    .col-md-8 { 
 
    width: 66.66666667%; 
 
    } 
 
    .col-md-7 { 
 
    width: 58.33333333%; 
 
    } 
 
    .col-md-6 { 
 
    width: 50%; 
 
    } 
 
    .col-md-5 { 
 
    width: 41.66666667%; 
 
    } 
 
    .col-md-4 { 
 
    width: 33.33333333%; 
 
    } 
 
    .col-md-3 { 
 
    width: 25%; 
 
    } 
 
    .col-md-2 { 
 
    width: 16.66666667%; 
 
    } 
 
    .col-md-1 { 
 
    width: 8.33333333%; 
 
    } 
 
    
 
    .pull-left { 
 
    float: left !important; 
 
    } 
 
    
 
    }

また、他のクラスを追加したりしたい場合は、あなたの使用ごとに名前を変更しますが、ミディアムサイズのデバイスのために、それがベストプラクティスとなりますことができます。

希望すると便利です。