行对齐中的 Bootstrap 4 按钮

Posted 2023-03-05

【中文标题】行对齐中的 Bootstrap 4 按钮

【英文标题】：Bootstrap 4 button in row alignment

【发布时间】：2019-09-23 04:06:48

【问题描述】：

我在 bootstrap 4 flex 行中有两个拒绝垂直对齐的按钮。我想将底部与同一行的输入对齐。

小提琴是here。

代码：

<div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

我已尝试按照此Stack Overflow answer 将mt-auto 添加到<button> 元素，但没有明显效果。

d-flex 和 flex-column 已添加到卡片正文中。

我想要使用引导辅助实用程序的解决方案。这些按钮还可以触摸小屏幕上的输入。

【参考方案1】：

也许你可以在form-group的每一组中使用这个代码align-items-end：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
<div class="card-header">SEIZED BY</div>
<div class="card-body d-flex flex-column">
    <div class="row form-group  align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OC">O/C</label>
            <input id="OC" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="SeizedByName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2 ">
            <button type="button" class="mt-auto btn btn-primary align-item-centre" data-toggle="modal" data-target="#signature">
                Signature
            </button>
        </div>
    </div>
    <br>
    <div class="row form-group align-items-end">
        <div class="col-md-2">
            <label class="control-label control-label-left" for="OCQID">Witness</label>
            <input id="Witness" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-3">
            <label class="control-label control-label-left" for="SeizedByName">Name</label>
            <input id="WitnessName" type="text" class="form-control textbox" data-role="text">
        </div>
        <div class="col-md-5">
            <label class="control-label control-label-left">Station</label>
            <input type="text" class="form-control typeahead" name="query" id="query1" placeholder="Type Station" data-provide="typeahead" autcomplete="off">
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signature">
                Witness Signature
            </button>
        </div>
    </div>
</div>

结果：

【讨论】：

那行得通。关于 sm 屏幕尺寸按钮顶部的边距/填充的任何提示？

您可以在每个按钮的每个div中添加“mt-4”类

我发现它适用于 lg 和 xs - 但在 sm 和 md 上，按钮超出了卡片的右手边缘。

尝试在“mt-4”旁边使用这个“pl-md-0 pl-lg-3”

【参考方案2】：

使用.flex row.后可以使用.align-items-baseline