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

标签 html css forms twitter-bootstrap twitter-bootstrap-3

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

最佳答案

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

关于html - 如何在 Bootstrap 的单个输入组中进行多个分段输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25463412/

相关文章:

html - 我的 Github 页面不会将自定义 css 文件应用到网站

css - 如何使用CSS设置背景图片宽度?

javascript - 条形图插件 - IE9-110 问题,图表在容器外扩展

当我进入 While 循环时 PHP 搜索不工作

php - 文件上传不工作 | PHP

javascript - 非常奇特 - 第一次提交一次,第二次提交两次,第三次提交三次..等等..我做错了什么?

javascript - 移动版本上的多个切换

html - <hr> 在 Firefox 中不起作用

PHP 页面未使用可见性 :none or display:none 隐藏 DIV

javascript - 动态创建的 HTML 表格打开新页面