如何在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-horizontal并尝试在其他列上实现分段输入，请尝试使用此短内联样式：

<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

Answer 2

       .nested-group input:focus {
            box-shadow: none;
        }

        .nested-group input:first-child {
            border-bottom-right-radius: 0px;
            border-top-right-radius: 0px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .nested-group input {
            margin-left: -5px;
            border-radius: 0px;
        }

        .nested-group  button {
            margin-left: -5px;
            border-left: none;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <form class="form-inline" role="form">
        <div class="form-group nested-group">
            <input type="text" id="left-input" class="form-control">
            <input type="text" id="middle-input" class="form-control">
            <button class="btn btn-primary" type="button">Go!</button>
        </div>
    </form>