在bootstrap 3水平形式中组合输入组和表单组

Question

在bootstrap 3水平形式中组合输入组和表单组

Thu*_*rke 14 html twitter-bootstrap twitter-bootstrap-3

我用3个输入元素制作了一个jsfiddle: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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ran*_*eer 33

你刚忘了col-sm-10第二个输入字段中的a.这是您更正后的代码:

<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>

Run Code Online (Sandbox Code Playgroud)

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

@Thuurke你应该接受这个答案. (5认同)

归档时间：	12 年，3 月前
查看次数：	47503 次
最近记录：	12 年，3 月前