Question

我试图在一行中获得一个表单，但我无法成功完成。

有许多不同类型的课程，＆＃34; form-inline＆＃34;，＆＃34; input-group＆＃34;，form-group＆＃34;和＆＃34; input-group-addon＆＃34;

我有以下表格：

<form role="form-inline" autocomplete="off">
    <div class="entry input-group col-xs-5">
        <div class="input-group">
            <select class="form-control selectBox" name="category">
                <option>Type</option>
                <option>Plot</option>
                <option>Burial</option>
            </select>           
        </div>
        <div id="change_me" class="input-group">
            <div class="input-group-addon"> From </div>
            <div class="form-group">
                <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
            </div>
            <div class="input-group-addon"> To </div>
            <div class="form-group">
                <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
            </div>
        </div>
        <!--<input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />-->
        <span class="input-group-btn">
            <button class="btn btn-success btn-add" type="button">
                <span class="glyphicon glyphicon-plus"></span>
            </button>
        </span>
    </div>
</form>

当我删除带有ID＆＃34;更改_me＆＃34;的div时表格是一行。但是我需要那个div，所以我可以根据我的select标签删除或添加元素。

#change_me看起来像这样：

没有#change_me，它看起来像这样：

我还需要#change_me，所以当我使用选择器时我可以改变内容。（即删除其中一个文本框和文本，以便我只有一个输入信息）

另外如果我删除To to form也改为两行。

Answer 1

在Bootstrap中，input-group默认设置为显示/表现得像一个表。我会这样设置并使用form-horizontal。

<form role="form-horizontal" autocomplete="off">
  <div class="form-group">
    <div class="label-control col-sm-2">
      <select class="form-control selectBox" name="category">
        <option>Type</option>
        <option>Plot</option>
        <option>Burial</option>
      </select>
    </div>
    <div id="change_me" class="input-group">
      <span class="input-group-addon"> From </span>
      <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-addon"> To </span>
      <input id="textBox" class="form-control" name="fields[]" type="text" placeholder="Type something" />
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus"></span>
        </button>
      </span>
    </div>
  </div>
</form>

这是一个可供您查看的codepen。 http://codepen.io/yongchuc/pen/BQKowM

如何使表单内嵌嵌套元素引导？

1 个答案: