Bootstrap 4 Card Header 和 Form-Control 进入新行答案

【问题标题】：Bootstrap 4 Card Header and Form-Control breaks into new LineBootstrap 4 Card Header 和 Form-Control 进入新行
【发布时间】：2021-05-18 20:17:57
【问题描述】：

我使用 Bootstrap 4 并在卡片标题上苦苦挣扎。如果我添加几个按钮，它们将排成一行，但如果我添加一个文本框，它总是会换行。任何人都可以帮我处理这个案子吗？我希望将所有控件集中在一行中。

<div class="card">
                <section class="card-header">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-sm-6">
                                <h3 class="card-title" style="inline-block">Product List</h3>
                            </div>
                            <div class="col-sm-6">
                                <input type="text" class="form-control form-control-sm" />
                                <button class="btn btn-sm btn-primary" type="button">Action 1</button>
                                <button class="btn btn-sm btn-success" type="button">Action 2</button>
                                <button class="btn btn-sm btn-primary" type="button">Action 3</button>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="card-body" style="min-height: 300px;">
                    this is a body
                </section>
            </div>

【问题讨论】：

您可以在列上使用“d-flex”类使其位于 1 行，并使用其他 flexbox utils 类根据需要对齐。另一种选择是对元素使用“row”包装元素和“col-*”类

标签： css bootstrap-4 adminlte

【解决方案1】：

我试图以其他方式解决该问题。在输入组中使用 btn 组看起来比以前更聪明。

                <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Action Sample</h3>

                    <div class="card-tools">

                        <div class="input-group input-group-sm" style="width: 450px;">
                            <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

                            <div class="input-group-append">
                                <button type="submit" class="btn btn-default">
                                    <i class="fas fa-search"></i>
                                </button>
                                <div class="btn-group">
                                    <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                        <i class="fas fa-wrench"></i>
                                    </button>
                                    <div class="dropdown-menu dropdown-menu-right" role="menu" x-placement="bottom-end" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(46px, 19px, 0px);">
                                        <a href="#" class="dropdown-item">Action 1</a>
                                        <a href="#" class="dropdown-item">Action 2</a>                                            
                                        <a class="dropdown-divider"></a>
                                        <a href="#" class="dropdown-item">action 3</a>
                                    </div>
                                </div>                                   
                            </div>

                        </div>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body" style="min-height: 300px;">
                    this is a body
                </div>
                <!-- /.card-body -->
            </div>

【讨论】：