html - 如何在 Bootstrap 的单个输入组中进行多个分段输入

Question

Airbnb 主页应该是这样的 http://airbnb.com

我试过了.input-group-addon并在其中嵌套另一个 <input>像这样:

<div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
          <span class="input-group-addon">
              <input type="text" id="nested-input" class="form-control">
          </span>
          <span class="input-group-btn">
              <button class="btn btn-default" type="button">Go!</button>
          </span>
      </div>
  </div>
</div>

但它没有用。 Bootstrap 是否支持这种样式？

Answer 1

如果您正在使用 form-horizo​​ntal 并尝试在另一列上实现分段输入，请尝试这种简短的内联样式:

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-4 control-label">Telephone:</label>
        <div class="col-sm-8">
            <div class="row">
                <div class="col-md-12">
                    <div class="input-group">
                        <input
                            type="text"
                            name="prefix[]"
                            placeholder="Prefix"
                            class="form-control"
                            style="float: left; width: 30%;"
                            title="Prefix"
                            >
                        <input
                            type="text"
                            name="number[]"
                            placeholder="Number"
                            class="form-control"
                            style="float: left; width: 40%;"
                            >
                        <input
                            type="text"
                            name="ext[]"
                            placeholder="Ext"
                            class="form-control"
                            style="float: left; width: 30%;"
                            >
                        <span class="input-group-btn">
                            <button
                                class="btn btn-default"
                                type="button"
                                onclick="removePhoneRow(this);"
                                >
                                <span class="glyphicon glyphicon-minus"></span>
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-md-12">
                    <button
                        type="button"
                        class="btn btn-warning btn-sm"
                        onclick="addPhoneRow(this);"
                        >
                        <span class="glyphicon glyphicon-plus"></span>
                        Click to add more
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
<script>
    function addPhoneRow(button) {
        var addPhone = '<div class="col-md-12"><div class="input-group"><input type="text" name="prefix[]" placeholder="Prefix" class="form-control" style="float: left; width: 30%;" title="Prefix" ><input type="text" name="number[]" placeholder="Number" class="form-control" style="float: left; width: 40%;" ><input type="text" name="ext[]" placeholder="Ext" class="form-control" style="float: left; width: 30%;" ><span class="input-group-btn"><button class="btn btn-default" type="button" onclick="removePhoneRow(this);" ><span class="glyphicon glyphicon-minus"><\/span><\/button><\/span><\/div><\/div>' + " \n";
        $(addPhone).insertBefore($(button).parent());
    }
    function removePhoneRow(button) {
        $(button).parent().parent().parent().remove();
    }
</script>

Bootply