我正在使用Twitter引导程序设计流畅的布局，但是不幸的是，我在处理它时有一些错误。
请告知我在哪里做错了。我创建了一个包含navbar-inner的navbar div，并且在其中具有容器。在容器内连续。
在一行中，我有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>
最佳答案
首先，如果要创建流畅的布局，则应使用行流体而不是行。
此外，您要将登录表单与项目名称和导航栏放在同一行。
我不会为您完善此操作，但是可以通过使用行流体并在导航后创建新行来使您更接近：
<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 -->
关于css - Twitter bootstrap流畅的布局设计麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14313852/