我用3个输入元素做了一个jspodle:http://jsfiddle.net/zb4dc/1/
如你所见,它们排列不好。
怎么能做到?
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</form>
最佳答案
您只是在第二个输入字段中忘记了一个col-sm-10
。这是您更正的代码:
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputfield1" class="col-sm-2 control-label">Input 1</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield1" placeholder="Input 1">
</div>
</div>
<div class="form-group">
<label for="inputfield2" class="col-sm-2 control-label">Input 2</label>
<div class="col-sm-10 controls">
<div class="input-group">
<input type="text" class="form-control" id="inputfield2" placeholder="Input 2">
<span class="input-group-addon">.00</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputfield3" class="col-sm-2 control-label">Input 3</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputfield3" placeholder="Input 3">
</div>
</div>
</form>
</div>
</body>
小提琴:http://jsfiddle.net/zb4dc/2/