Как выровнять кнопку с правой стороны текстового поля в Bootstrap

Question

Я хочу выровнять свою кнопку к моим текстовым полям, означая, что их правые стороны должны быть в состоянии образовать прямую линию, но до сих пор я не смог понять, как это сделать (исключая поле слева, поскольку это только работает на один размер экрана).

Я пытался использовать некоторые CSS между тегами стиля, чтобы попытаться выровнять его, но это не сработало.

btn pull-right также не сделал то, что я хотел.

<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

Вы можете установить flex и задать выравнивание содержимого с пробелом между:

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

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

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

Ссылка на загрузочную гибкую линию: https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 2

Если вы не против использовать больше классов начальной загрузки, это должно сработать.

<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>