我做了一个jsfiddle与3个输入元素:
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>