將元素與輸入對齊（而不與標簽對齊）-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

在當前情況下，我會這樣做。 希望這對您有所幫助。 由於超鏈接是表單輸入的一部分，因此我會將其保持在一起，而不是將其放在另一個表單組中。

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

 <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 pt-20" href="">Buscar beneficiario</a> </div> </div>