web-dev-qa-db-ja.com

Bootstrap navbarover body body content

Bootstrap navbar。

  1. ナビゲーションバーに多数のタブがあるので、ヘッダーは別の行に表示され、タブは2行目に表示されますが、見た目がよくありません。

  2. navbarは2行かかるため、ページの一部のコンテンツを非表示にします。たとえば、添付画像に「上記のクラスター平均ファイルを選択してください...」という見出しがありますが、navbarが重なって非表示になっているため、表示できません。

  3. この問題を解決するにはどうすればよいですか？ナビゲーションバーに限られたタブのみを表示し、ナビゲーションバーの1行にできるだけ表示し、ハンバーガーメニューでは他のタブを非表示にしたい。私の体の内容を隠さず、見栄えもよくなるように。

PS：ハンバーガーメニューが表示されるため、ウィンドウをモバイルビューにサイズ変更しても、これらの問題は発生しません。

フルウィンドウ

enter image description here

モバイルビュー

enter image description here

そしてnavbarのコードはASP.NET Core 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="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">ChromSACT</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a asp-area="" asp-controller="Home" asp-action="Index" class="aa"><span class="glyphicon glyphicon-home" style="margin-right:6px;"></span>Home</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Cell">Input</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="CellResult">Marks</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="CellResultRegions">Regions</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="ClusterBits">Cluster Bits</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="RegionsMatrix">Regions Matrix</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="MarksMatrix">Marks Matrix</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Compare">Compare</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="About"><span class="glyphicon glyphicon-alert" style="margin-right:6px;"></span>About</a></li>
                <li><a asp-area="" asp-controller="Home" asp-action="Contact"><span class="glyphicon glyphicon-envelope" style="margin-right:6px;"></span>Contact</a></li>
                <li><button data-toggle="modal" data-target="#myModal" class="btn navbar-btn btn-group-sm"><span class="glyphicon glyphicon-info-sign" style="margin-right:6px;"></span>Instructions</button></li>

            </ul>
        </div>
    </div>
</div>
<div class="container body-content" >
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; 2016 - ChromSACT</p>
    </footer>
</div>
csshtmltwitter-bootstrapnav
9
touseefbsb

bootstrap navbar-fixed-topドキュメント：

ボディパッドが必要

の上部にパディングを追加しない限り、固定ナビゲーションバーは他のコンテンツをオーバーレイします。独自の値を試すか、以下のスニペットを使用してください。ヒント：デフォルトでは、ナビゲーションバーの高さは50pxです。

body { padding-top: 70px; }

コアBootstrap CSSの後に必ずこれを含めてください。

非モバイルビューポートで2行かかる場合、設定できます。

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}
15
Banzay