Переместите кнопку вверх рядом, чтобы выбрать - PullRequest
Новая
       9

Переместите кнопку вверх рядом, чтобы выбрать

0 голосов
/ 28 марта 2019

Как мне переместить красную кнопку, чтобы она находилась рядом с верхом элемента управления?

screenshot

HTML выглядит следующим образом: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <select size="10" class="form-control" id="assigned-tenants" name="assignedTenants">
                <option value="1">fdsaf</option>
            </select>

            <button ata-toggle="tooltip" title="Add" class="btn btn-danger">
                <span class="glyphicon glyphicon-minus"></span>
            </button>

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

Ответы [ 2 ]

3 голосов
/ 28 марта 2019

Вам придется использовать класс начальной загрузки pull-left для вашего первого элемента в этом столбце, который является полем выбора. 

<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <div class="col-md-10 pull-left" style="padding-right:0px">
                <select size="10" class="form-control" id="assigned-tenants" name="assignedTenants" class="pull-left">
                    <option value="1">fdsaf</option>
                </select>
            </div>
            <div class="col-md-2 pull-left" style="padding-left:0px">
                <button ata-toggle="tooltip" title="Add" class="btn btn-danger pull-left">
                    <span class="glyphicon glyphicon-minus"></span>
               </button>
           </div>
       </div>
 </div>

1 голос
/ 28 марта 2019

Использовать вертикальное выравнивание: верх;в CSS для этой кнопки. 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>


<div class="container">
    <div class="form-group">
        <label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
        <div class="col-md-8">
            <select size="10" id="assigned-tenants" name="assignedTenants">
                <option value="1">fdsaf</option>
            </select>

            <button ata-toggle="tooltip" title="Add" class="btn btn-danger" style="vertical-align:top;">
                <span class="glyphicon glyphicon-minus"></span>
            </button>

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