Html 引导按钮和输入在一行上，同时输入拉伸以水平填充空间？

我在尝试将Boostrap按钮和输入对齐到一行时遇到了问题，输入在紧贴按钮的同时水平拉伸

以下是不同的尝试：

在第1种情况下：按钮组和输入组在同一列中。输入水平拉伸，但在下一行抛出

<h2>#1</h2>
        <div class="row">
            <div class="col-lg-12">

                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->

<h2>#3</h2>
    <div class="row">
        <div class="col-lg-3">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-3 -->
        <div class="col-lg-9">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-9 -->
    </div><!-- /.row -->

#1
违约
主要的，重要的
成功
信息
警告
危险
行动

在第2种情况下：按钮组和输入组位于两个相等的列中，但两者之间存在间隙

<h2>#2</h2>
    <div class="row">
        <div class="col-lg-6">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-6 -->
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->

#2
违约
主要的，重要的
成功
信息
警告
危险
行动

在#3的情况下：更多的列被赋予输入组（比率为3:9），但是按钮组的一半被抛出到下一行

<h2>#1</h2>
        <div class="row">
            <div class="col-lg-12">

                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->

<h2>#3</h2>
    <div class="row">
        <div class="col-lg-3">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-3 -->
        <div class="col-lg-9">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-9 -->
    </div><!-- /.row -->

#3
违约
主要的，重要的
成功
信息
警告
危险
行动

在第4种情况下：按钮组和输入组在同一列中，以内嵌形式包装。舒适的设置，但输入不再伸展脚

<h2>#4</h2>
    <div class="row">
        <div class="col-lg-12">

            <form class="form-inline" role="form">
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                    </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </form>
        </div><!-- /.col-lg-12 -->
    </div><!-- /.row -->

#4
违约
主要的，重要的
成功
信息
警告
危险
行动

理想情况：按钮组和输入组共享与#2中相同的行，并且与#4中一样紧密。如果屏幕会被重新调整大小，我希望输入会先拉伸，然后行会被中断，div会被抛出到下一行

<h2>#1</h2>
        <div class="row">
            <div class="col-lg-12">

                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </div>

                <div class="input-group">
                    <input type="text" class="form-control" aria-label="...">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                        </div><!-- /btn-group -->
                </div><!-- /input-group -->
            </div><!-- /.col-lg-12 -->
        </div><!-- /.row -->

<h2>#3</h2>
    <div class="row">
        <div class="col-lg-3">

            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>
            </div>
        </div><!-- /.col-lg-3 -->
        <div class="col-lg-9">
            <div class="input-group">
                <input type="text" class="form-control" aria-label="...">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
                </div><!-- /btn-group -->
            </div><!-- /input-group -->
        </div><!-- /.col-lg-9 -->
    </div><!-- /.row -->

但我如何才能做到这一点？我是否使用了错误的表单/布局？还是必须修改CSS以创建新的布局？

用于让输入增长以占用剩余的可用空间：

.flex{
显示器：flex；
}
输入{
柔性生长：1；
}

按钮1
按钮2
按钮3
按钮4
按钮5

用于让输入增长以占用剩余可用空间：

.flex{
显示器：flex；
}
输入{
柔性生长：1；
}

按钮1
按钮2
按钮3
按钮4
按钮5

用于让输入增长以占用剩余可用空间：

.flex{
显示器：flex；
}
输入{
柔性生长：1；
}

按钮1
按钮2
按钮3
按钮4
按钮5

用于让输入增长以占用剩余可用空间：

.flex{
显示器：flex；
}
输入{
柔性生长：1；
}

按钮1
按钮2
按钮3
按钮4
按钮5

HTML（案例4）

使用Bootstrap 3.3.5

.btn-group {
        display: inline !important;
}
.form-inline .input-group {
    display: flex;
}
.form-inline .input-group .input-group-btn {
    display: flex;
}

HTML（案例4）

使用Bootstrap 3.3.5

.btn-group {
        display: inline !important;
}
.form-inline .input-group {
    display: flex;
}
.form-inline .input-group .input-group-btn {
    display: flex;
}

HTML（案例4）

使用Bootstrap 3.3.5

.btn-group {
        display: inline !important;
}
.form-inline .input-group {
    display: flex;
}
.form-inline .input-group .input-group-btn {
    display: flex;
}

HTML（案例4）

使用Bootstrap 3.3.5

.btn-group {
        display: inline !important;
}
.form-inline .input-group {
    display: flex;
}
.form-inline .input-group .input-group-btn {
    display: flex;
}

---

你可能想考虑这样的事情，或者它可能会让你到达ESP的位置，因为它考虑了移动视口。

将页面全宽打开并缩小

#myForm.group change.form控件{
边界半径：0；
}
@介质（最大宽度：767px）{
#myForm.组更改{
文本对齐：居中；
显示：内联；
}
#myForm.group change.input group btn.btn{
边界半径：0；
}
#myForm.group change.输入组btn.btn last{
边界半径：0；
宽度：100%；
}
#myForm.group change.input group btn:last child>.btn，
.input group btn:最后一个子项>.btn group{
z指数：2；
左边距：0px；
}
#myForm.group change.下拉菜单{
宽度：100%
}
}
@介质（最大宽度：480px）{
#myForm.group change.输入组btn>.btn+.btn{
左边距：0px；
}
#myForm.group change.btn{
宽度：100%；
显示：块；
}
}

样品
样品
样品
样品
样品
样品
滴




 >/Calp>
你可能想考虑这样的事情，或者它可以让你到ESP的地方，因为它考虑了移动视口。
将页面全宽打开并缩小


#myForm.group change.form控件{
边界半径：0；
}
@介质（最大宽度：767px）{
#myForm.组更改{
文本对齐：居中；
显示：内联；
}
#myForm.group change.input group btn.btn{
边界半径：0；
}
#myForm.group change.输入组btn.btn last{
边界半径：0；
宽度：100%；
}
#myForm.group change.input group btn:last child>.btn，
.input group btn:最后一个子项>.btn group{
z指数：2；
左边距：0px；
}
#myForm.group change.下拉菜单{
宽度：100%