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

Question

我正在使用 Asp.Net MVC 开发调查应用程序。在 Bootstrap v4 中，我有 2 个相邻的 tables，它们之间有垂直按钮组。按钮组有两个按钮，用于将选定的 row/rows 从左移到右或从右移到左。但我无法正确安装它们。我的权利 table 有问题。有时右 table 移动到左 table 下方。我想彼此靠近。这是我犯错误的设计。

<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

由于 bootstrap 是响应式的，在移动视图中，您所在行的第 3 列（右侧 table）肯定会移动到第 2 列（btn-group-vertical）下方。 class 名称为 "col" 的 div 将占用 12 列宽。因此，它们位于彼此下方。

如果你想让 table 彼此靠近，无论视口如何，然后使用下面的代码

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

Answer 2

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

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

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

How to make two adjacent tables with vertical buttons between them in Bootstrap v4

jquery

modal-dialog

twitter-bootstrap

bootstrap-4