ウィンドウのサイズが変更されたときにタブが崩れないようにする方法やハンバーガーを表示する方法はありますか？

Question

私はWAMPウェブサイトで作業しており、私はブートストラップを使用しています。私はコンテナに固定幅を使用し、ブートストラップスタイリングを無効にすることを提案した同じ問題に関する他の回答を読んだことがありますが、私はそれを得ることができません。

このように、ウィンドウのサイズを変更するとタブが崩れる（約960px〜760px）。 760ピクセルより小さいものは、ハンバーガーのナビゲーションバーを表示します。ハンバーガーが表示されるまでタブがつぶれないようにするか、タブがつぶれたときにハンバーガーを表示するかのどちらかです。しかし、私はそれを働かせることはできません。ここに私の関連するコード（style.cssにしてheader.phpの）です：

/* Reset CSS*/ 
 

 
html, body, header, footer, hgroup, nav, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    /* Aligns the baseline of the element with the baseline of the parent element. This is default*/ 
 
    vertical-align: baseline; 
 
} 
 

 
/* Override */ 
 

 
.navbar-default .navbar-nav>li>a { 
 
    color: #777; 
 
    border-bottom: 1px solid #9b9b9b; 
 
} 
 

 

 
.navbar-default .navbar-nav>li>a.active, 
 
.navbar-default .navbar-nav>li.active>a, 
 
.navbar-default .navbar-nav>.active>a, 
 
.navbar-default .navbar-nav>.active>a:focus, 
 
.navbar-default .navbar-nav>.active>a:hover { 
 
    color: #50c4e9; /* Blue */ 
 
} 
 

 
.row { 
 
    margin: 0 auto; 
 
} 
 

 
.navbar-default .navbar-nav>li>a:focus, 
 
.navbar-default .navbar-nav>li>a:hover { 
 
    color: #50c4e9; /* Blue */ 
 
    background-color: transparent; 
 
} 
 

 
.navbar-header { 
 
    background-color: #fff; 
 
} 
 

 
footer, 
 
footer p { 
 
    color: #777 
 
} 
 

 
/* Content */ 
 

 
@font-face { 
 
    font-family: 'Gill Sans'; 
 
    src: url('../fonts/gill-sans-mt-light.ttf') format('truetype'); 
 
    font-weight: bold; 
 
} 
 

 
@font-face { 
 
    font-family: 'Gill Sans Regular'; 
 
    src: url('../fonts/gill-sans-mt-regular/GIL.ttf') format('truetype'); 
 
    font-weight: bold; 
 
} 
 

 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    font-family: 'Gill Sans', Calibri, sans-serif; 
 
    color: #777; /* Grey #756c6c */ 
 
    margin: 0; 
 
} 
 

 
.active { 
 
    color: #50c4e9; /* Blue */ 
 
} 
 

 
/* Responsive image */ 
 
@media(max-width:991px) { 
 
    #splash-preload { 
 
    } 
 
} 
 

 
@media (min-width: 768px) and (max-width: 979px) { 
 
    /* Take off border from nav when phone size */ 
 
    .navbar-default .navbar-nav>li>a { 
 
    color: #777; 
 
    border-bottom: 0; 
 
    } 
 
} 
 

 
/* If JS is disabled - default size */ 
 
img { 
 
    height: 530px; 
 
    width: 1110px; 
 
} 
 

 
.my-icon { 
 
    margin-left: 30px; 
 
    height: 48px; 
 
    width: 48px; 
 
}

<!-- Header Navigation --> 
 
<nav class="navbar navbar-default" role="navigation"> 
 
    <div class="container"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed --> 
 
      <a class="navbar-brand" href="index.php">m design</a> 
 
     </div> 
 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <?php 
 
        echo '<li><a ' .(basename($_SERVER['PHP_SELF']) == 'awards.php' ? ' class="active"' : ''). ' href="awards.php">awards & recognition</a></li>'; 
 
        echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'work.php' ? ' class="active"' : '') . ' href="work.php">work</a></li>'; 
 
        echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'about.php' ? ' class="active"' : '') . ' href="about.php">about</a></li>'; 
 
        echo '<li><a ' . (basename($_SERVER['PHP_SELF']) == 'contact.php' ? ' class="active"' : '') . ' href="contact.php">contact</a></li>'; 
 
       ?> 
 
      </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav>

は（そして、私のCSSファイルは、の順である：CSSブートストラップ、そしてビジネスカジュアルブートストラップCSS、続きますStackOv以降）私自身のCSSによって

Image of tabs in expanded window

Image of (undesirable) collapsing tabs

Answer 1

erflowはPHPをサポートしていません。私は野生の推測を行い、liはdisplay: inline-block;モードであり、float: leftモードではないと仮定します。彼らはfloat: leftをしている場合は、.navbar-collapseに次のルールを設定する必要があります：ラッピングからそれらを防ぐためとして

.navbar-collapse { 
    float: none !important; 
    display: inline-block; 
    vertical-align: middle; 
} 

が、それは同じブロックに1つのCSSルールを追加するのと同じくらい簡単です。それはwhite-space: nowrapなので、文書の流れがそれらのコンテナの端からスクロールする要素をラップするのを防ぎます。この場合、コンテナはbody要素です。新しいブロックは次のようになります。もちろん

.navbar-collapse { 
    float: none !important; 
    display: inline-block; 
    vertical-align: middle; 
    white-space: nowrap; 
} 

、あなたの要素はありませんフロートとdisplay: inline-blockモードに既にある場合、ブロックはちょうどです：

.navbar-collapse { 
    white-space: nowrap; 
} 

役に立てば幸い！