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

Question

我正在使用 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>

Answer 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>

Answer 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>