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

Posted 2023-03-06

【中文标题】如何在 Bootstrap 的单个输入组中进行多个分段输入

【英文标题】：How to make multiple segmented inputs in a single input group in Bootstrap

【发布时间】：2014-10-17 06:36:49

【问题描述】：

这就是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 是否支持这种样式？

【问题讨论】：

为什么不直接使用开发者工具检查该网站，看看他们是如何做到的？

不，vanilla Bootstrap 明确不支持单个输入组中的多个输入字段。或许可以自己动手做点东西，参考 BS 风格。

【参考方案1】：

       .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>

【参考方案2】：

如果您使用 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