css - Bootstrap cssは、コンテナの一部をnavbarの下に非表示にしますnavbar-fixed-top

Question

Bootstrapを使用してプロジェクトを構築していますが、ほとんど問題に直面していません。Nav-topの下にコンテナがあります。私の問題は、コンテナの一部がnav-topヘッダーの下に隠れていることです。top-marginを使用したくない容器。plsは私が問題に直面している以下のhtmlを参照してください

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/stylesheets/bootstrap.css"/>
<link rel="stylesheet" href="~/stylesheets/bootstrap-responsive.css"/>

</head>
<body>
    <div class="navbar navbar-fixed-top ">
        <div class="navbar-inner">
            <div class="container">
           <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar collapsed" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
                <div class="nav-collapse"><ul class="nav" id="navbar"><li ng-class="{active:section=='plunks'}" class="active"><a href="/plunks/trending"><i class="icon-home"></i>Home</a></li><li><a target="_self" href="/edit/"><i class="icon-calendar"></i>General Election 2014</a></li><li class="divider-vertical">
                    </li><li class="dropdown"><a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <i class="icon-eye-open">
                        </i>Assembly Elections
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="#/HTML5Apps">Assembly Elections 2013</a></li>
                        </ul>
                         </li><li class="divider-vertical">
                    </li><li ng-class="{active:section=='tags'}"><a href="/tags"><i class="icon-th"></i>Constituecy</a></li><li ng-class="{active:section=='discuss'}"><a href="/discuss"><i class="icon-time"></i>Election News</a></li><li class="divider-vertical"></li><li><a href="https://github.com/filearts/plunker"><i class="icon-bell"></i>Candidate</a></li></ul></div>
             </div>
         </div>
    </div>
  <div  class="container" >
   <ul class="nav nav-pills">
    <li class="active">
    <a href="#">Popular</a>
    </li>
    <li><a href="#">Trending</a></li>
    <li><a href="#">Latest</a></li>
    </ul>
   </div>

    <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/bootstrap-dropdown.js"></script>
    <script src="~/Scripts/Collapse.js"></script>
</body>
</html>

score 227 · Accepted Answer

これはpadding、の先頭にいくつかを追加することで処理され<body>ます。

に関するBootstrapのドキュメント.navbar-fixed-topに従って、独自の値を試すか、以下のスニペットを使用してください。ヒント：デフォルトでは、navbarは50px高いです。

  body {
    padding-top: 70px;
  }

また、この例のソースを見て、を開きstarter-template.cssます。

score 41 · Accepted Answer

あなたが抱えている問題は、上部の固定ナビゲーションバーの動的な高さに関連していると思います。たとえば、ユーザーがログインするときに、ある種の「Hello [ユーザー名]」を表示する必要があり、名前が広すぎる場合は、ナビゲーションバーの高さを増やして、このテキストがナビゲーションバーメニューと重ならないようにする必要があります。navbarのスタイルは「position: fixed」であるため、ボディはその下に留まり、背の高い部分が非表示になるため、navbarの高さが変化するたびに上部のパディングを「動的に」変更する必要があります。これは次のようになります。ケースシナリオ:

ページがロード/リロードされます。
ブラウザーウィンドウのサイズが変更されるのは、別のレスポンシブブレークポイントにヒットする可能性があるためです。
高さの変化を引き起こす可能性があるため、navbarのコンテンツは直接的または間接的に変更されます。

この動的性は通常のCSSではカバーされていないため、ユーザーがJavaScriptを有効にしている場合にこの問題を解決する方法は 1 つしか考えられません。ケースシナリオ 1 と 2 を解決するには、次のjQueryコードスニペットを試してください。ケースシナリオ 3 の場合、 navbarのコンテンツを変更した後は、関数onResize()を呼び出すことを忘れないでください。

var onResize = function() {
  // apply dynamic padding at the top of the body according to the fixed navbar height
  $("body").css("padding-top", $(".navbar-fixed-top").height());
};

// attach the function to the window resize event
$(window).resize(onResize);

// call it also when the page is ready after load or reload
$(function() {
  onResize();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

score 9 · Accepted Answer

これは、navbar-fixed-topクラスでナビゲーションバーがを取得するために発生しposition:fixedます。これにより、ドキュメントフローからナビゲーションバーが削除され、本体がナビゲーションバーの背後のスペースを占有します。

値を使用した要件に基づいて、padding-topまたはmargin-topに適用する必要があります。（または異なる値で遊んでください）container>= 50px

基本的なブートストラップナビゲーションバーの高さは約40pxです。したがって、またはpadding-top以上を与えると、コンテナとナビゲーションバーの 間に常にその呼吸スペースができます。margin-top50px

score 6 · Accepted Answer

私もこの問題を抱えていましたが、スクリプトを使用せずに CSS のみを使用して解決しました。まず、Bootstrap の Web サイトに記載されている 60px の設定による固定メニューの推奨 padding-top に従います。次に、メニューのサイズも変更されるカットオフポイントでパディングのサイズを変更する 3 つのメディアタグを追加しました。

<style>      
    body{
        padding-top:60px;
    }
    /* fix padding under menu after resize */
    @media screen and (max-width: 767px) {
        body { padding-top: 60px; }
    }
    @media screen and (min-width:768px) and (max-width: 991px) {
        body { padding-top: 110px; }
    }
    @media screen and (min-width: 992px) {
        body { padding-top: 60px; }
    }
</style>

メニューの幅が 768 ～ 991 の場合、レイアウトにメニューロゴと<li>オプションを追加すると、メニューが 2 行に折り返されます。したがって、メニューがコンテンツをカバーしないように padding-top を調整する必要があったため、110px にしました。

お役に立てれば...

score 6 · Accepted Answer

このスレッドが古いことは知っていますが、まさにその問題にpage-header巻き込まれたので、ページのナビゲーションの下でクラスを使用するだけで修正しました。また、<nav>代わりにタグを使用しました<div>が、異なる動作を示すかどうかはわかりません。

page-headerをページのコンテナとして使用すると、が提供<body>するデフォルトのスペースに同意しない場合にのみ、をいじる必要はありませpage-headerん。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



   <div class="container-fluid">
        <nav class="navbar navbar-default navbar-fixed-top">
    
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Bootstrap</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li class="dropdown-header">Nav header</li>
                                <li><a href="#">Separated link</a></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                </ul>
                <div class="navbar-right">
                </div>
            </div>
        </nav>
    </div>
    <div class="page-header">
        <div class="clearfix">
            <div class="col-md-12">
                <div class="col-md-8 col-sm-6 col-xs-12">
                    <h1>Registration form <br /><small>A Bootstrap template showing a registration form with standard fields</small></h1>
                </div>
            </div>
        </div>
    </div>
        <div class="container">
        <div class="row">
            <form role="form">
                <div class="col-lg-6">
                    <div class="well well-sm"><strong><span class="glyphicon glyphicon-asterisk"></span>Required Field</strong></div>
                    <div class="form-group">
                        <label for="InputName">Enter Name</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="InputName" id="InputName" placeholder="Enter Name" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Enter Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailFirst" name="InputEmail" placeholder="Enter Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputEmail">Confirm Email</label>
                        <div class="input-group">
                            <input type="email" class="form-control" id="InputEmailSecond" name="InputEmail" placeholder="Confirm Email" required>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="InputMessage">Enter Message</label>
                        <div class="input-group">
                            <textarea name="InputMessage" id="InputMessage" class="form-control" rows="5" required></textarea>
                            <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk"></span></span>
                        </div>
                    </div>
                    <input type="submit" name="submit" id="submit" value="Submit" class="btn btn-info pull-right">
                </div>
            </form>
    </div>

score 4 · Accepted Answer

jqueryで解決しました

<script type="text/javascript">
$(document).ready(function(e) {
   var h = $('nav').height() + 20;
   $('body').animate({ paddingTop: h });
});
</script>

css - Bootstrap cssは、コンテナの一部をnavbarの下に非表示にしますnavbar-fixed-top

8 に答える 8

Related

Reference