Element mit Eingabe (und nicht mit Label) ausrichten - Bootstrap 3

Question

In meinem Testfall bin ich dabei, in Spalten eine Eingabe mit seiner Bezeichnung und einem Hyperlink auszurichten. Das Problem ist, dass Hyperlink wird zu beschriften ausgerichtet ist, und nicht an den Eingang:

Der Code ist wie folgt:

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

ich viele Dinge ausprobiert haben, vor allem form inlining die Elemente, aber ich denke nicht, dass ich es richtig mache, da ich am Ende Dinge durcheinander bringe.

Answer 1

Ich würde dies in der aktuellen Situation tun. Hoffe das hilft dir. Da der Hyperlink Teil der Formulareingabe ist, werde ich ihn zusammenhalten, anstatt ihn in eine andere Formulargruppe zu legen.

.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 p-t-20" href="">Buscar beneficiario</a> 
 

 
    </div> 
 

 
</div>

Answer 2

Ich hoffe, das könnte Ihnen helfen.

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

Aber anstatt ihm die .row geben, gibt sie ihm einen neuen Klassennamen und die Stile diese bestimmte Klasse gilt nur.