Question

这里我有一个bootstrap形式v3，我试着让这个表格内联，所以ha，ar，m2要内联......我有：

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="naziv">Naziv</label>  
  <div class="col-md-4">
  <input id="naziv" name="naziv" type="text" placeholder="naziv parcele" class="form-control input-md" required="">

  </div>
</div>

<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="ha">Povrsina</label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
      <span class="input-group-addon">ha</span>
    </div>

  </div>
</div>
<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="ar"></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
      <span class="input-group-addon">ar</span>
    </div>

  </div>
</div>
<!-- Appended Input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="m2"></label>
  <div class="col-md-2">
    <div class="input-group">
      <input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
      <span class="input-group-addon">m2</span>
    </div>

  </div>
</div>
</fieldset>
</form>

但我如何将#ha，#ar，#m2元素内联在同一行？

有什么想法吗？我尝试使用form-inline但是不行。

这是fiddle

Answer 1

为了将输入保持在一行中，您可以将包含.input-group的列放在一个form-group元素中，如下所示：

<div class="form-group">
    <label class="col-md-3 control-label" for="ha">Povrsina</label>

    <div class="col-md-3">
      <div class="input-group">
        <input id="ha" name="ha" class="form-control" placeholder="ha" type="text">
        <span class="input-group-addon">ha</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="input-group">
        <input id="ar" name="ar" class="form-control" placeholder="ar" type="text">
        <span class="input-group-addon">ar</span>
      </div>
    </div>

    <div class="col-md-3">
      <div class="input-group">
        <input id="m2" name="m2" class="form-control" placeholder="m2" type="text">
        <span class="input-group-addon">m2</span>
      </div>
    </div>
</div>

<强> WORKING DEMO

请注意，您应该更改自己演示中列的类名，以防止超出12列网格。

将输入字段放入内联 - bootstrap v3

1 个答案: