将元素与输入对齐（而不是与标签对齐） - Bootstrap 3

Question

在我的测试用例中，我要在列中对齐输入及其标签和超链接。问题是超链接与标签对齐，而不是输入：

代码如下：

       <div class="row">

            <div class="form-group col-xs-4">
                <label class="form__label" for="form__field__recipientId">Código
                    beneficiario </label> <input class="form-control input-md col-xs-8"
                    id="form__field__recipientId" name="form__field__recipientId"
                    type="text" placeholder="Introduce ordenante">
            </div>

            <div class="form-group col-xs-4">
                <a class="form__side__hyperlink" href="">Buscar beneficiario</a>
            </div>

        </div>

我尝试了很多东西，主要是形成内联元素，但我认为我没有正确地做到这一点，因为我最终搞砸了。

Answer 1

我希望这对你有所帮助。

.row {
    display: flex;
    align-items: flex-end;
}

但是不要将它赋予.row，而是给它另一个类名，并仅将样式应用于该特定类。

Answer 2

我会在目前的情况下这样做。希望这对你有所帮助。由于超链接是表单输入的一部分，因此我将它保持在一起而不是将其放在另一个表单组中。

＆＃13;

＆＃13;

.form__side__hyperlink {
  position: absolute;
  left: 100%;
  bottom: 10px;
  /* or bottom 0 if you want it on the bottom */
  white-space: nowrap;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">

  <div class="form-group col-xs-4">
    <label class="form__label" for="form__field__recipientId">Código  beneficiario </label>
    <input class="form-control input-md col-xs-8" id="form__field__recipientId" name="form__field__recipientId" type="text" placeholder="Introduce ordenante">
    <a class="form__side__hyperlink p-t-20" href="">Buscar beneficiario</a>

  </div>

</div>

＆＃13;

＆＃13;

＆＃13;