如何在Bootstrap中将按钮对齐到文本框的右侧

Question

我想将按钮与文本框对齐，这意味着它们的右侧应该能够形成一条直线，但是到目前为止，我还无法弄清楚该怎么做（左旁边距除外，因为仅适用于一种屏幕尺寸。

我尝试在样式标签之间使用一些CSS来尝试对其进行对齐，但这没有用。

btn右上角也没有执行我想要的操作。

<div class="form-group">
    <div class="row">
        <div class="col-sm-12"> 
            @Html.LabelFor(model => model.RedemptionDate, htmlAttributes: new { @class = "control-label col-md-7" })

            <input class="btn btn-primary btn-sm" id="btnSpot" type="button" onclick="GetSpotDate(event)" style="margin-bottom:10px;margin-left:10px" value=@Html.DisplayNameFor(model => model.Spot)>
        </div>
    </div>
</div>

现在，该按钮看起来如上图所示。理想情况下，所有三个组件都应在其右侧对齐。

Answer 1

如果您不介意使用更多的引导程序类，那么应该可以。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="card card-outline-secondary">
  <div class="card-body">
    <form autocomplete="off" class="form" role="form">
      <div class="form-group">
        <label for="">Start Date</label>
        <input class="form-control" required="" type="text">
      </div>
      <div class="form-group">
        <button class="btn btn-success btn-lg float-right" type="submit">Spot</button>
      </div>
    </form>
  </div>
</div>

Answer 2

您可以设置flex并设置内容之间的合理性：

<div class="col-sm-12 d-flex justify-content-between"> ...</div>

如果要让div中的项目堆叠，请使用以下

<div class="col-sm-12 d-flex flex-column"> ...</div>

Bootstrap Flex参考：https://getbootstrap.com/docs/4.0/utilities/flex/