web-dev-qa-db-ja.com

bootstrapハンバーガーメニューが常に表示されるレイアウトを作成する最も簡単な方法

多くの人がハンバーガーメニューを作るように反対に尋ねるのを見てきました決して表示されない、小さい画面サイズでも、簡単に見つける方法が見つかりません常にハンバーガーメニューを有効にします）。

通常表示されるように：

enter image description here

これは、Visual Studio 2013 Webアプリケーションプロジェクトによって生成される標準のBootstrap 3構成を想定しているため、標準のVisual Studio MVC HTMLまたはBootstrap CSSは必要ありません。

私はそれを表示したいので：

enter image description here

VS 2013 Webアプリケーションプロジェクトから生成されたマスターページから

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("ProjectName Here", "Index", "Home", null, new { @class = "navbar-brand hidden-xs" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
            </ul>
        </div>
    </div>
</div>

更新：

明らかに、ASP.Net MVCを使用する場合、.Lessを使用するソリューションは完全に許容できるため、生のCSSへの回答を制限する必要はありません。最近の開発は、Bootstrap.lessをプロジェクトに追加することがNuGetを介して簡単になったことを意味します。実際、CSSのほとんどの単純な回答は、元のソースから最小限のCSSを再現するソリューションよりも保守性が低下します。

cssasp.net-mvctwitter-bootstrapless
11
Gone Coding

このCSSを使用して、Bootstrapのデフォルトのnavbar動作を上書きできます。

.navbar-header {
  float: none;
}
.navbar-left,.navbar-right {
  float: none !important;
}
.navbar-toggle {
  display: block;
}
.navbar-collapse {
  border-top: 1px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-collapse.collapse {
  display: none!important;
}
.navbar-nav {
  float: none!important;
  margin-top: 7.5px;
}
.navbar-nav>li {
  float: none;
}
.navbar-nav>li>a {
  padding-top: 10px;
  padding-bottom: 10px;
}
.collapse.in{
  display:block !important;
}

CSSの使用： http://bootply.com/jXxt4Dc54A

[〜＃〜]更新[〜＃〜]

この質問は最近変更され、LESSのタグが付けられました。 @cvrebertが最初に質問されたときに述べたように、LESSソースが使用されている場合、@grid-float-breakpointは大きな値に設定できます。

LESSの使用： http://www.codeply.com/go/UNFhTH5Hm

Bootstrap 4の更新

Bootstrap 4の場合、ナビゲーションバーの折りたたみブレークポイントを制御するために、新しいnavbar-expand-*クラスが追加されました。 navbar-expand-*クラスの1つが明示的に使用されていない限り、ナビゲーションバーは常に折りたたまれます。したがって、ハンバーガーを常に表示するにはCSSなし（またはSASS変数）の変更が必要です。

<nav class="navbar navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar1">
        ☰
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar1">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

ブートストラップ4： http://www.codeply.com/go/9WCE8jYmW8

17
Zim

@Skellyの解決策により、メニューを開いた直後にメニューが元に戻ることがわかりました。 （少なくとも、ナビの修正されていないバージョンでは）。だから私はいくつかのCSSを書きました：

（必要に応じてメディアクエリを削除または変更します）

@media screen and (max-width: 991px){
    .navbar-default{
        background:none;    
        border:0;
        position:absolute;
        top:15px;
        right:15px; 
    }
    .navbar-collapse{
        background:#f5f5f5; 
    }
    .navbar-collapse.collapse{
        display: none!important;
        height: 0!important;
        padding-bottom: 0;
        overflow: hidden!important;
    }
    .navbar-toggle.collapsed{
        display:block!important;    
    }
    .navbar-toggle{
        display:block!important;    
    }
    .navbar-collapse.collapse.in{
        display:block!important;    
        height:auto!important;
        overflow:visible!important;
    }
    .navbar-nav>li,.navbar-header{
        float:none; 
    }
    .navbar-default .navbar-toggle.collapsed{
        background:#fff;    
    }
}

LESSファイルを変更したくない場合は、再コンパイルしてください。

1
richardstelmach