Question

如何在引导输入组中并排放置2个文本框，并在末尾添加下拉列表。

当我使用带有input-group-addon类的span时，它的工作正常。 See this fiddle

<div class="input-group input-group-sm" style="width:400px">
    <input type="text" class="form-control"  >
    <span class="input-group-addon" id="sizing-addon1">label</span>
    <input type="text" class="form-control"  >
    <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Copy pair</a></li>
            <li><a href="#">Paste pair</a></li>
        </ul>
    </div>
</div>

Below is not working without the span label with class input-group-addon

<div class="input-group input-group-sm" style="width:400px">
    <input type="text" class="form-control"  >

    <input type="text" class="form-control"  >
    <div class="input-group-btn">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">Copy pair</a></li>
            <li><a href="#">Paste pair</a></li>
        </ul>
    </div>
</div>

当我移除中间跨度时，它们会低于彼此。

有任何建议可以解决这个问题吗？

Answer 1

添加div class row，如下所示：

<div class="row">
    <div class="col-lg-6">
        <div class="input-group input-group-sm" style="width:400px">
            <input type="text" class="form-control" />
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
    <div class="col-lg-6">
        <div class="input-group input-group-sm" style="width:400px">
            <input type="text" class="form-control" />
            <div class="input-group-btn">
                <ul class="dropdown-menu">
                    <li><a href="#">Copy pair</a>

                    </li>
                    <li><a href="#">Paste pair</a>

                    </li>
                </ul>
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>

                </button>
            </div>
        </div>
        <!-- /input-group -->
    </div>
    <!-- /.col-lg-6 -->
</div>
<!-- /.row -->

Bootstrap输入组并排文本框

1 个答案: