我决定使用Bootstrap进行6/6列网格布局,我的导航栏确实有品牌和登录字段。
很遗憾,如果我在密码输入上放置help-block
,我似乎无法对齐提交按钮:http://www.bootply.com/eJ7QMjincO
以下是代码:
<header class="navbar navbar-custom navbar-static-top">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Brand -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="col-md-6">
<!-- Login -->
<form class="navbar-form navbar-input-group">
<div class="form-group">
<input type="text" class="form-control" placeholder="E-Mail">
<input id="password" type="password" class="form-control" placeholder="Password">
<span class="help-block text-right">Forgot password?</span>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</div>
</header>
答案 0 :(得分:0)
答案 1 :(得分:0)
您可以更好地编写HTML,以便在设备之间提供灵活性。以下是一个简单的例子。
<form class="navbar-form navbar-input-group">
<div class="row">
<div class="col-md-4">
<input class="form-control" placeholder="E-Mail" type="text">
</div>
<div class="col-md-4">
<input id="password" class="form-control" placeholder="Password" type="password">
<label class="help-block text-right">Forgot password?</label>
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>