0

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>
4

2 に答える 2

0

まず、流動的なレイアウトを作成しようとしている場合は、行だけではなく、行流体を使用します。

さらに、ログイン フォームを project-name および navbar と同じ行に配置しています。

これを完璧にするつもりはありませんが、row-fluid を使用し、ナビゲーションの後に新しい行を作成することで、より近くなります。

<body>
    <div class="navbar navbar-fixed-top">
        <div id='cssmenu' class="navbar-inner">
            <div class="container">

                <div class="row-fluid">

                    <div class="span2">
                        <a class="brand" href="#">Project name</a>
                    </div>

                    <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>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="login">
                            <form class="form-signin">
                                <div class="row-fluid">
                                    <div class="span12"> 
                                        <div class="row-fluid">    
                                            <input type="text" class="input-header-small pull-left" placeholder="Username">
                                        </div>
                                        <div class="row-fluid">
                                            <input type="password" class="input-header-small pull-left" placeholder="Password">
                                        </div>
                                    </div>
                                <div class="row-fluid">
                                    <div class="span12">
                                        <div class="row-fluid">
                                            <button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
                                         </div>
                                    </div>
                                </div>
                            </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 -->
于 2013-01-14T06:10:02.723 に答える
0

多くの場合、CSS では少ないほうがよいため、navbar のすべての行/スパン定義を削除して、コードを少し単純化することから始めることができると思いますが、それらは実際には必要ありません。次に、Bootstrap のドキュメントは非常に優れているため、必要なものが既に定義されているかどうかを詳細に調べる価値があります。

ドキュメントから: 「ナビゲーション リンク、検索フォーム、またはテキストを配置するには、.pull-left または .pull-right ユーティリティ クラスを使用します。どちらのクラスも、指定された方向に CSS フロートを追加します。」また、グリッド クラスではなく、「navbar-form」クラスを使用してログイン フォームをレイアウトすることもできます。そのため、コードを少し削ってみましょう。そうすれば、目的に近づくことができるでしょう。

<body>
    <div class="navbar navbar-fixed-top">
        <div id='cssmenu' class="navbar-inner">
            <div class="container">
                <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 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 class="login pull-right">
                    <form class="form-signin navbar-form">
                        <input type="text" class="input-header-small pull-left" placeholder="Username">
                        <input type="password" class="input-header-small pull-left" placeholder="Password">
                        <button type="submit" class="btn btn-success btn-medium pull-right">Sign in</button></div>
                    </form>
                </div><!--end of login-->
            </div><!-- end of container -->
        </div><!-- end of inner -->
    </div><!-- end of navbar navbar-fixed-top -->
</body>

これは最終的な解決策ではないかもしれませんが、良い出発点になると思います。

于 2013-01-14T06:52:29.133 に答える