HTML: выровнять динамически сгенерированные кнопки по центру столбца. - PullRequest
Новая
       71

HTML: выровнять динамически сгенерированные кнопки по центру столбца.

0 голосов
/ 09 мая 2020

Итак, я создаю серию динамически генерируемых элементов. Один из этих элементов состоит из двух списков с множественным выбором со стрелками посередине. Идея состоит в том, чтобы «добавить» и «удалить» из двух списков элементов.

Вот сгенерированный код: 

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

И вот как он отображается:

enter image description here

Мне это нравится. Мой единственный вопрос: как я могу центрировать две кнопки относительно полей множественного выбора? Я полагаю, мне нужно центрировать кнопки в их столбцах, но код, который я нашел, не работает.

Я использую boostrap 3 и Gentella, которые поставлялись с этой версией bootstrap.

1 Ответ

0 голосов
/ 09 мая 2020

Добавление класса align-self-center в средний столбец должно помочь, я прокомментировал ниже, где я внес изменения: 

    <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 align-self-center">
         <!-- 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 -сетки: http://getbootstrap.com/css/#grid

...