我怎样才能让下面的代码全部水平对齐,如屏幕 1 中所示呈现,但我正在尝试如屏幕 2 中所示
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Number</label>
</div>
<div class="col-xs-3">
<input type="text" id="number"></input>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Tag</label>
</div>
<div class="col-xs-3">
<input type="text" id="Name"></input>
</div>
<div class="col-xs-3">
<button class="btn btn-default" type="button">Go!</button>
</div>
</div>
</div>
最佳答案
您的 HTML 结构不正确;您无缘无故地嵌套列和行,然后在列中嵌套列。 Docs
参见示例。
(*列为 XS,如您的示例所示,在这种情况下,在移动屏幕上无法很好地呈现,请考虑使用 SM)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form class="myForm">
<div class="form-group">
<label for="Number" class="col-xs-2 control-label">Number</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="Number" />
</div>
</div>
<div class="form-group">
<label for="tag" class="col-xs-2 control-label">Tag</label>
<div class="col-xs-4">
<div class="input-group">
<input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
关于html - Bootstrap 水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33382277/