0

我正在使用 twitter bootstrap 设计一个流畅的布局，但不幸的是，我的处理方式存在一些错误。

请告知我在哪里做错了。我创建了一个导航栏 div，其中包含 navbar-inner 并且在其中我有容器。一个容器内一排。

在一行中，我有 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

通常使用 CSS 少即是多，所以我认为您可以通过删除导航栏中的所有行/跨度定义来稍微简化您的代码，它们并不是真正必要的。接下来，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 回答
0

First off, if you are trying to create a fluid layout, you'd use row-fluid as opposed to just row.

Additionally, you're putting the login form in the same row as the project-name and navbar.

I'm not going to perfect this for you, but this gets you much closer by using row-fluid, and creating a new row after the navigation:

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