Question

我在项目中引导3.3.7。

我有这个HTML代码：

<div id="savedQueryEditor" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Existing queries
                <a class="pull-left" data-toggle="collapse" href="#collapse1"><i class="glyphicon glyphicon-collapse-down"></i></a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">
                <label>Enter new name</label>
                <div class="input-group">
                    <input class="form-control" type="text" id="savedQueryFilter" />
                    <input class="btn btn-default" type="button" id="saveCurrentQuery" value="save" disabled="disabled" />
                </div>
            </div>
        </div>
    </div>
</div>

这是JSFIDDLE。

我的问题是如何将两个元素（按钮和文本框）放在一行？

Answer 1

使用.form-inline包裹您的表单控件（请参阅http://codepen.io/ablewhite/pen/wdowLP）：

    <div class="panel-body form-inline">
        <label>Enter new name</label>
        <input class="form-control" type="text" id="savedQueryFilter" />
        <input class="btn btn-default" type="button" id="saveCurrentQuery" value="save" disabled="disabled" />
    </div>

演示：documentation

Answer 2

这是因为输入有width:100%;如果你删除它是这样的：

.form-control {
   width:auto !important;
}

它应该有效，这是更新的fiddle

如何在一行中创建按钮和文本框？

2 个答案: