Bootstrap: настроить положение элементов в столбце

Question

У меня проблема с классом bootstrap, чтобы отрегулировать положение в столбце. Надеюсь, кто-нибудь может подсказать мне, как правильно настроить колонку. Ниже моя кодировка:

div class="col-sm-12">
<br>
<label for="text1" class="form-group control-label col-lg-2">Person in Charge:</label>
<div class="col-sm-6">
                        <select class="form-control required" id="id_person_incharge" name="id_person_incharge">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from person_incharge where active=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['person_incharge'] . '</option>';
                            }
                            ?>
                        </select><br>

</div>
<div class="col-sm-2">
<a href="#" onclick="return go_popup_user_search('PersonInCharge');"><img src="images/icon_search2.png"></a>
</div>
</div>


        </div>
    </div>
</div>

Выходные данные показывают мне, как это:

Выходные данные

На самом деле я хочу, чтобы кнопка поиска выходных можно закрыть с раскрывающийся список, как показано на рисунке ниже:

Вывод2

Редактировать: Вывод комментариев

Answer 1

Вы можете достичь этого, используя form-inline

<div class="form-group">
      <label for="email">Person in Charge::</label>
      <select class="form-control required" id="id_person_incharge" name="id_person_incharge">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from person_incharge where active=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['person_incharge'] . '</option>';
                            }
                            ?>
                        </select>
    </div>

    <a href="#" onclick="return go_popup_user_search('PersonInCharge');"><img src="images/icon_search2.png"></a>

  </form>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<form class="form-inline" >
    <div class="form-group">
      <label for="email">Person in Charge::</label>
      <select class="form-control required" id="id_person_incharge" name="id_person_incharge">
                            <option value="">Please Select</option>
                            <?php
                            $sql_branch = 'select * from person_incharge where active=1 order by id';
                            $arr_branch = db_conn_select($sql_branch);
                            foreach ($arr_branch as $rs_branch) {
                                echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['person_incharge'] . '</option>';
                            }
                            ?>
                        </select>
    </div>
    
    <a href="#" onclick="return go_popup_user_search('PersonInCharge');"><img src="images/icon_search2.png"></a>
    
  </form>

ПОСМОТРЕТЬ SNIPPET НА ПОЛНОМ ЭКРАНЕ, ПОЖАЛУЙСТА.

А также в приведенном выше коде вы использовали col-sm классы без row оболочки, используйте row в качестве родительского, а затем дочернего как col как показано ниже

<div class="row"><div class="col-sm-12">some text</div></div>

Answer 2

Вы можете использовать html / классы, как в этом примере, для встроенной формы: https://hackerthemes.com/bootstrap-cheatsheet/#form -inline

Answer 3

 <div class="d-inline">
    <label for="id_person_incharge" class="form-group control-label">Person in Charge:</label>
    <select class="form-control required" id="id_person_incharge" name="id_person_incharge">
                                <option value="">Please Select</option>
                                <?php
                                $sql_branch = 'select * from person_incharge where active=1 order by id';
                                $arr_branch = db_conn_select($sql_branch);
                                foreach ($arr_branch as $rs_branch) {
                                    echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['person_incharge'] . '</option>';
                                }
                                ?>
                            </select><br>

 </div>
 <div class="d-inline">
    <a href="#" onclick="return go_popup_user_search('PersonInCharge');"><img src="images/icon_search2.png"></a>
 </div>

Заменить классы сетки на d-inline

https://getbootstrap.com/docs/4.0/utilities/display/ Shuld work.