Twitter ブートストラップを使用して流動的なレイアウトを設計していますが、残念ながらアプローチ方法に誤りがあります。
どこが間違っているのか教えてください。navbar-inner を含む navbar div を作成し、その中にコンテナがあります。コンテナ内の行。
行には、 project-name 、ナビゲーション バー、およびログイン セクションの 3 つの要素があります。
ページを縮小すると、プロジェクト名は正しい位置に留まり、ナビゲーションバーは非表示になり、クリックしたときにのみ表示され、3 番目にログイン セクションがずれます。なぜ位置がずれているのか理解できません。
---> http://jsfiddle.net/GgzgB/2/にコードをアップロードしました が、画像がないため背景が表示されません。PS: これは私の最初の CSS の試みです
<body>
<div class="navbar navbar-fixed-top">
<div id='cssmenu' class="navbar-inner">
<!--<div class="navbar-custom">-->
<div class="container">
<div class="row">
<div class="span2">
<!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>-->
<a class="brand" href="#">Project name</a>
</div><!--end of first col -span2-->
<div class="span7">
<div class="nav-collapse collapse">
<ul class="nav">
<li class='active '><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div><!--end of nav-collapse collapse-->
</div><!--end of second col - span5-->
<div class="span3">
<div class="login">
<form class="form-signin">
<div class="row">
<div class="span1">
<div class="row">
<input type="text" class="input-header-small pull-left" placeholder="Username">
</div>
<div class="row">
<input type="password" class="input-header-small pull-left" placeholder="Password">
</div>
</div>
<div class="span1">
<div class="row">
<button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
</div>
</div><!--end of inner 1st row-->
</form>
</div><!--end of login-->
</div><!-- end of span3-->
</div><!-- end of row -->
</div><!-- end of container -->
</div><!-- end of inner -->
</div><!-- end of navbar navbar-fixed-top -->
</body>