Question

如何将红色-按钮移到控件顶部旁边？

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>

Answer 1

您将必须使用引导类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>

Answer 2

使用vertical-align：top;在该按钮的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>

将按钮向上移动以选择

2 个答案: