我正在设计一个带有Twitter引导程序的流畅布局，但不幸的是我在接近它时有一些错误。
请告知我哪里做错了。我创建了一个navbar div，其中包含navbar-inner，并且我有容器。在一个容器内一行。
连续我有3个元素项目名称，导航栏和登录部分。
在缩小页面时，项目名称保持在正确的位置，导航栏将隐藏，仅在单击时显示，第三个登录部分脱位。 我无法理解为什么它会被定位。
我已将代码上传到---＆gt; 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>
答案 0 :(得分：0)
首先，如果您尝试创建流体布局，则使用行液而不是行。
此外，您将登录表单放在与项目名称和导航栏相同的行中。
我不打算为你完善这个，但是通过使用行液，并在导航后创建一个新行，这会让你更加接近：
<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 -->
答案 1 :(得分：0)
通常CSS越少越好，所以我认为你可以通过删除导航栏中的所有行/跨度定义来简化代码，但它们并不是必需的。接下来，Bootstrap documentation非常好，所以它总是值得仔细查看它们，看看你想要的是否已在那里定义。
从文档：“对齐导航链接，搜索表单或文本，使用.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>
这可能不是你的最终解决方案，但我认为这将是一个很好的起点。