如何使表单与嵌套元素引导程序内联？答案

【问题标题】：How do make a form inline with nested elements bootstrap?如何使表单与嵌套元素引导程序内联？
【发布时间】：2016-11-12 14:35:59
【问题描述】：

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

有许多不同类型的类，“form-inline”、“input-group”、form-group 和“input-group-addon”

我有以下表格：

<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 为“change_me”的 div 时，表单位于一行中。但我需要那个 div，所以我可以根据我的选择标签删除或添加元素到那个 div。

使用#change_me，它看起来像这样：

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

我仍然需要有#change_me，所以当我使用选择器时，我可以更改内容。（即删除文本框和文本之一，因此我只有一个输入信息）

此外，如果我删除 To 表单也将变为两行。

【问题讨论】：

这是您要找的吗？ codepen.io/yongchuc/pen/BQKowM

标签： javascript jquery html css twitter-bootstrap

【解决方案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>

这里有一个代码笔供您查看。 http://codepen.io/yongchuc/pen/BQKowM

【讨论】：