html – 组合输入组和表单组在引导3水平形式

前端之家收集整理的这篇文章主要介绍了html – 组合输入组和表单组在引导3水平形式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我做了一个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>

小提琴:http://jsfiddle.net/zb4dc/2/

猜你在找的HTML相关文章