如何在 Bootstrap v4 中制作两个相邻的表格，它们之间有垂直按钮

Posted 2023-05-08

【中文标题】如何在 Bootstrap v4 中制作两个相邻的表格，它们之间有垂直按钮

【英文标题】：How to make two adjacent tables with vertical buttons between them in Bootstrap v4

【发布时间】：2020-04-21 14:02:32

【问题描述】：

我正在使用 Asp.Net MVC 开发调查应用程序。在 Bootstrap v4 中，我有 2 个相邻的表，它们之间有垂直按钮组。按钮组有两个按钮，用于将选定的行/行从左向右或从右向左移动。但我不能正确地适应它们。我的右表有问题。有时右表移动到左表下方。我想彼此靠近。这是我犯错的地方。

<div class="row flex-row">
    <div class="col form-group">
        <table id="leftTable" class="table table-striped table-bordered accent-blue table-responsive ">
            <thead>
            <tr>
                <th>Soru No</th>
                <th>Soru Adı</th>
            </tr>
            </thead>
        </table>
    </div>

    <div class="col-md-1 flex-col">
        <div class="btn-group-vertical">
            <a class="btn btn-primary" id="btnRight" style="margin-bottom: 3px"><i class="fa fa-chevron-right"></i>Soru Ekle</a>
            <a class="btn btn-primary" id="btnLeft"><i class="fa fa-chevron-left"></i>Soru Sil</a>
        </div>
    </div>

    <div class="col form-group">
        <table id="rightTable" class="table table-striped table-bordered accent-blue table-responsive">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Soru No</th>
                    <th>Soru Adı</th>

                </tr>
            </thead>
        </table>
    </div>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</div>

【参考方案1】：

这应该可以解决您的问题。

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col">
        <!--Left table code-->
    </div>
     <div class="col-md-auto">
         <!--Button code-->
    </div>
    <div class="col">
        <!--Right table code-->
    </div>
   </div>
</div>

【讨论】：

我的问题解决了。但是“数据表”的搜索框发生了变化。你看ibb.co/zb8p2Ps

【参考方案2】：

由于引导程序是响应式的，因此在移动视图中，您行中的第三列（右表）肯定会移动到第二列（btn-group-vertical）之下。所有类名为“col”的 div 将占据 12 列宽。因此它们在彼此之下。

如果您希望表格彼此关闭，无论视口如何，请使用以下代码

<div class="row">
    <div class="col-4">
        <!--Left table code-->
    </div>
    <div class="col-4">
        <!--Button code-->
    </div>
    <div class="col-4">
        <!--Right table code-->
    </div>
</div>

【讨论】：

感谢回复，但是我没有工作。按钮组占据三分之一空间的事实在屏幕上看起来不太好。我想要的是中间列的宽度只占按钮宽度的宽度。我希望将剩余的部分分成 2 个相等的部分并分配到桌子上。

<div class="row"> <div class="col-5"> <!--Left table code--> </div> <div class="col-2"> <!--Button code--> </div> <div class="col-5"> <!--Right table code--> </div> </div>