HTML：将生成的按钮对齐在列的中间

Question

因此，我正在创建一系列动态生成的元素。这些元素之一由两个选择列表组成，中间带有箭头按钮。这个想法是从两个元素列表中“添加”和“删除”。

这里是生成的代码：

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="components">Components</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <div class = "row">
         <div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
            <select class="select2_multiple form-control" id=components multiple="multiple">
            <option value="0"> Option 0</option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2</option>
            <option value="3"> Option 3</option>
            <option value="4"> Option 4</option>
            </select>
         </div>
         <div class="col-md-2 col-sm-2 col-xs-2 col-lg-2">
            <div class = "row">
               <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
               <button type ="button" class="btn btn-primary"><i class="fa fa-arrow-right"></i></button>
               </div>
            </div>
            <div class = "row" style="margin-top:20%">
               <div class="col-md-12 col-sm-12 col-xs-12" col-lg-12>
               <button type ="button" class="btn btn-primary"><i class="fa fa-arrow-left"></i></button>
               </div>
            </div>
         </div>
         <div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
            <select class="select2_multiple form-control" id=components-out multiple="multiple">
            <option value="0"> Option 0</option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2</option>
            <option value="3"> Option 3</option>
            <option value="4"> Option 4</option>
            </select>
         </div>
      </div>
   </div>
</div>

这是它的显示方式：

我喜欢。我唯一的问题是如何使两个按钮相对于多选框居中？我认为我需要将按钮放在其列的中央，但是我发现的代码无法正常工作。

我正在使用带有自举程序版本的boostrap 3和Gentella。

Answer 1

在中间列中添加上下边界应该可以解决问题，我在下面进行了更改的位置发表了评论：

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="components">Components</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <div class = "row justify-content-center" >
         <div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
            <select class="select2_multiple form-control" id=components multiple="multiple">
            <option value="0"> Option 0</option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2</option>
            <option value="3"> Option 3</option>
            <option value="4"> Option 4</option>
            </select>
         </div>
         <!-- start edit -->
         <div class="col-md-2 col-sm-2 col-xs-2 col-lg-2" style="margin:6.25% 0">
         <!-- stop edit -->
            <div class = "row">
               <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
               <button type ="button" class="btn btn-primary"><i class="fa fa-arrow-right"></i></button>
               </div>
            </div>
            <div class = "row" style="margin-top:20%">
               <div class="col-md-12 col-sm-12 col-xs-12" col-lg-12>
               <button type ="button" class="btn btn-primary"><i class="fa fa-arrow-left"></i></button>
               </div>
            </div>
         </div>
         <div class="col-md-5 col-sm-5 col-xs-5 col-lg-5">
            <select class="select2_multiple form-control" id=components-out multiple="multiple">
            <option value="0"> Option 0</option>
            <option value="1"> Option 1</option>
            <option value="2"> Option 2</option>
            <option value="3"> Option 3</option>
            <option value="4"> Option 4</option>
            </select>
         </div>
      </div>
   </div>
</div>

ps：全页打开代码段以查看预期的实现

也可以很好地检查Bootstrap文档的网格系统部分，以进一步改善您的bootstrap-grid实现：http://getbootstrap.com/css/#grid