wie zwei Spalten Inhalt auszurichten in derselben Zeile

unten ist mein Codewie zwei Spalten Inhalt auszurichten in derselben Zeile

<div class="row"> 
     <div class="col-md-12"> 
      <div class="col-md-6"> 
       <label>name</label> 
       <input type="text" class="form-input-icon"> 
      </div> 
      <div class="col-md-6"> 
       <label></label> 
       <label style="margin-top: 30px;">test</label> 
      </div> 
     </div> 
    </div>

i zwei Spalten in einer Zeile angelegt habe erste Spalte hat Etikett und unter diesem Eingabefeld nächste Spalte hat nur Etikett und es soll Inline mit dem Eingabefeld ausgerichtet werden, aber da nur das Etikett vorhanden war, wurde es oben angezeigt. Also habe ich ein Dummy-Label geschrieben. Trotzdem ist es nicht mit dem Eingabefeld ausgerichtet. wie geht das? Gibt es eine Möglichkeit, es im Bootstrap zu tun?

Quelle

2016-05-20 apps

Fügen Sie   zwischen label hinzu. Es sollte etwas Inhalt innerhalb label sein, damit es funktioniert. Fügen Sie einfach html Code des leeren Speicherplatzes hinzu.

<label>&nbsp;</label>

jedoch ein besserer Ansatz ohne Bootstrap-Spalten werden und mithilfe von benutzerdefinierten CSS wie folgt:

.column-holder { 
 
    table-layout: fixed; 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.column-holder .column { 
 
    vertical-align: bottom; 
 
    display: table-cell; 
 
    padding: 0 15px; 
 
} 
 

 
label { 
 
    display: block; 
 
} 
 

 
input { 
 
    display: block; 
 
    width: 100%; 
 
}

<div class="column-holder"> 
 
    <div class="column"> 
 
    <label>name</label> 
 
    <input type="text" class="form-input-icon"> 
 
    </div> 
 
    <div class="column"> 
 
    <label>test</label> 
 
    </div> 
 
</div>

Quelle

2016-05-20 07:11:08

Ohne Bootstrap:

, weil du ist passiert Setzen Sie alle label innerhalb derselben div tag immer wieder.

  <div class="col-md-6"> 
        <label>name</label> 
        <input type="text" class="form-input-icon"> 
      </div> 
      <div class="col-md-6"> 
        <label></label> 
        <label style="margin-top: 30px;">test</label> 
      </div>

, wenn Sie diese beiden gleichen div Tags entfernen oder alle Etiketten und input-Tag in einem einzigen Etikett setzen dann alle Elemente inline automatisch erhält.

HOW TO DO:

<div class="row"> 
 
     <div class="col-md-12"> 
 
      <div class="col-md-6"> 
 
       <label>name</label> 
 
       <input type="text" class="form-input-icon"> 
 
      
 
       <label></label> 
 
       <label style="margin-top: 30px;">test</label> 
 
      </div> 
 
     </div> 
 
    </div>

Bootstrap verwenden:

Ja, Sie auch gleiche Sache mit Bootstrap tun kann, dass mehr einfach und Aussehen ist schöner. Hier ist ein einfaches Beispiel für Sie. Kopieren Sie diesen Code und laufen mit Chrome oder Firefox oder Safari wird dieser Code funktioniert perfekt Sie diese Website besuchen können: for more detail oder diese inline form using bootstrap

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Example of inline form</h2> 
 
    <form class="form-inline" role="form"> 
 
    <div class="form-group"> 
 
     <label >Name : </label> 
 
     <input type="email" class="form-control" id="name" placeholder="Enter your name "> 
 
    </div> 
 
    <div class="form-group"> 
 
     <label for="email">Email : </label> 
 
     <input type="password" class="form-control" id="email" placeholder="enter your email"> 
 
    </div> 
 
    
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    </form> 
 
</div> 
 

 

 
</body> 
 
</html>

Besuche

Quelle

2016-05-20 08:57:42 MIM

wie zwei Spalten Inhalt auszurichten in derselben Zeile

Antwort

Verwandte Themen