Question

我有我在下面编写的代码，但我想添加一个带文本字段的按钮，没有此按钮和文本字段的间隙。我该如何更改此代码？

<div class="panel panel-default">
<div class="panel-footer">

        <form>
            <div >
                <input id="address" type="email" placeholder="Add your email address" class="form-control" >
                <button class="btn btn-default" type="button" id="addressSearch" style="background-color:#8c6666 "><font color="#ffffff" >Subscribe</font></button>

            </div>

        </form>     
</div>

Answer 1

这就是我所做的：

<div class="container-fluid">&nbsp;
    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-footer">
                    <div class="input-group">
                        <input id="address" type="email" placeholder="Add your email address" class="form-control" /> <span class="input-group-btn">
        <button class="btn btn-warning" type="button" id="addressSearch">Subscribe</button>
      </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is JSfiddle demo

Answer 2

试试这个

{{1}}

您应该阅读文档input-group

如何在Bootstrap中添加带有文本字段的按钮？

2 个答案: