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

发布时间：2020-12-14 23:51:26 所属栏目：资源来源：网络整理

导读：我做了一个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 d

我做了一个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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!