Ausrichten eines Textfelds neben mehreren vertikal ausgerichteten Eingabeelementen

Question

Wie in der Abbildung unten gezeigt, möchte ich einen Textbereich neben den vertikal ausgerichteten mehreren Eingabeelementen ausrichten. Ich verwende das Bootstrap-Grid, um den gewünschten Effekt zu erzielen. Derzeit, wenn ich "Form-horizontal" verwenden, stapeln sich alle Elemente in einer einzigen Spalte, daher liegt das Textfeld unter dem Telefoneingabeelement.

Ich möchte es reagieren. Wenn ich die Randeigenschaft für den Textbereich verwende, überlappen sich die Eingaben gegenseitig und so sieht die Benutzeroberfläche unordentlich aus. Es wäre großartig, wenn ich deine Hilfe bekommen könnte.

gewünschtes Layout:

Aktuelles Layout:

<div class="container"> 
    <form class="form-horizontal" role="form"> 
     <div class="form-group"> 
     <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0"> 
      <input type="text" class="form-control" id="name" placeholder="NAME"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0"> 
      <input type="email" class="form-control" id="email" placeholder="E-MAIL"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-sm-10 col-md-2 col-lg-2 col-lg-offset-0"> 
      <input type="tel" class="form-control" id="tel" placeholder="PHONE"> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-sm-10 col-md-6 col-lg-6 col-lg-offset-0"> 
      <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea> 
     </div> 
     </div>   
    </form> 
</div> 

Answer 1

du von nesting columns tun können. Erstellen Sie zwei Spalten (gleich 12 Spalten), und platzieren Sie dann jeweils eine weitere row innerhalb Ihrer Spalten mit den Formulareingaben. Ich stelle mir vor, Sie möchten, dass Ihre Eingabe den gesamten verfügbaren Speicherplatz verwendet, also legen Sie die verschachtelten Spalten auf col-*-12 fest, damit sie die gesamte Breite der übergeordneten Spalten verwenden.

Arbeitsbeispiel:Open im Fullpage

form { 
 
    background: #f2f2f2; 
 
    padding: 20px 20px 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form> 
 
    <div class="row"> 
 

 
     <div class="col-sm-6"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <input type="text" class="form-control" id="name" placeholder="NAME"> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <input type="email" class="form-control" id="email" placeholder="E-MAIL"> 
 
      </div> 
 
      </div> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <input type="tel" class="form-control" id="tel" placeholder="PHONE"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="col-sm-6"> 
 
     <div class="row"> 
 
      <div class="col-sm-12"> 
 
      <div class="form-group"> 
 
       <textarea class="form-control message" rows="6" id="comment" placeholder="MESSAGE"></textarea> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </form> 
 
</div>