Warum wird die Schaltfläche nicht korrekt mit dem Standardlayout ausgerichtet?

Question

Ich kann meine Taste nicht unter form-group ausrichten, die aus label und input bestehen. Es wird immer zwischen label und input ausgerichtet. Siehe Screenshot unten.

Screenshot

<div class = "row"> 

    <ul class="nav nav-tabs"> 
     <li><a href = "#">Create Department</a></li> 
     <li><a href = "#">Manage</a></li> 
    </ul> 

    <div class = "col-md-12"> 

     <br> 
     <form class = "form-vertical" role = "form"> 

      <div class = "form-group col-xs-5"> 

       <label for = "department" class = "control-label">Department Name:</label>     <input type= "text" name = "department" class = "form-control"> 

      </div> 

      <div class = "form-group"> 

       <button type = "submit" class = "btn btn-primary">Create</button> 

      </div> 

     </form> 

    </div> 

</div> 

Answer 1

Sie in der gleichen Zeile sind, weil Sie col-xs-5 auf dem ersten form-group angegeben haben. Versuche zu entfernen, dass die Dinge funktionieren sollten.

Answer 2

Sie können ur html umschreiben wie diese

<form class = "form-vertical" role = "form"> 

     <div class = "form-group"> 

      <label for = "department" class = "control-label">Department Name:</label>     <input type= "text" name = "department" class = "form-control"> 

     </div> 

     <div class = "form-group"> 

      <button type = "submit" class = "btn btn-primary">Create</button> 

     </div> 

    </form> 

Answer 3

Sie haben 2 weitere div zu erstellen, eine für Text und eine für Taste.

Bitte versuchen Sie es unter HTML.

Wenn Sie Create Button neben HTML setzen möchten, dann versuchen Sie es mit dem folgenden Code.

<div class = "row"> 

    <ul class="nav nav-tabs"> 
     <li><a href = "#">Create Department</a></li> 
     <li><a href = "#">Manage</a></li> 
    </ul> 

    <div class = "col-md-12"> 
    <br/> 
     <form class = "form-vertical" role = "form"> 
     <div class = "col-md-12"> 
     <label for = "department" class = "control-label">Department Name:</label> 
     </div> 
     <div class = "form-group col-xs-5"> 
     <input type= "text" name = "department" class = "form-control"> 
     </div> 
     <div class = "form-group"> 
     <button type = "submit" class = "btn btn-primary">Create</button> 
     </div> 
    </form> 
</div> 

</div> 

Oder Wenn Sie Create-Taste nach Text dann setzen möchten.

<div class = "row"> 

<ul class="nav nav-tabs"> 
    <li><a href = "#">Create Department</a></li> 
    <li><a href = "#">Manage</a></li> 
</ul> 

<div class = "col-md-12"> 
<br/> 
    <form class = "form-vertical" role = "form"> 
    <div class = "col-md-12"> 
    <label for = "department" class = "control-label">Department Name:</label> 
    </div> 
    <div class = "form-group"> 
    <input type= "text" name = "department" class = "form-control"> 
    </div> 
    <div class = "form-group"> 
    <button type = "submit" class = "btn btn-primary">Create</button> 
    </div> 

Answer 4

Nun, wenn Sie nur Ihr aktuelles Problem lösen wollen diesen Code versuchen Sie es.

<div class = "row"> 

    <ul class="nav nav-tabs"> 
     <li><a href = "#">Create Department</a></li> 
     <li><a href = "#">Manage</a></li> 
    </ul> 

    <div class = "col-md-12"> 

     <br> 
     <form class = "form-vertical" role = "form"> 
<div class="row"> 
      <div class = "form-group col-xs-5"> 
      <label for = "department" class = "control-label"> 
      Department Name:</label><input type= "text" name = "department" class = "form-control"> 

      </div> 
      </div> 
      <div class="row"> 
      <div class = "form-group"> 

       <button type = "submit" class = "btn btn-primary">Create</button> 

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

    </div> 

</div> 

Answer 5

Wenn Sie Ihre Taste unter der Form nehmen, dann müssen Sie eine weitere Zeile wie diese Gedanken erstellen:

<div class="row"> 
    <div class="col-xs-5"> 
     // Label 
     // Input form 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-5"> 
     // Button 
    </div> 
</div> 

Wenn Sie Reihe verwenden, dann werden Inhalte Platz neben der Wand nehmen, aber Wenn Sie col-xs-12 gegen row verwenden, wird es etwas Platz schaffen. Mit dem Code:

<div class = "row"> 

      <ul class="nav nav-tabs"> 
       <li> 
        <a href = "#">Create Department</a> 
       </li> 
       <li> 
        <a href = "#">Manage</a> 
       </li> 
      </ul> 

      <div class = "col-md-12"> 

       <br> 
       <form class = "form-vertical" role = "form"> 

        <div class="row"> 
         <div class = "form-group col-xs-5"> 
          <div class="col-xs-12"> 
           <label for = "department" class = "control-label">Department Name:</label> 
          </div> 

          <div class="col-xs-12"> 
           <input type= "text" name = "department" class = "form-control"> 
          </div> 
         </div> 

        </div> 

        <div class="col-xs-12"> 

         <button type = "submit" class = "btn btn-primary"> 
          Create 
         </button> 

        </div> 

      </div> 
      </form> 

     </div> 

     </div> 

Answer 6

können Sie das Label aus der Seite legen Sie die die Option Gruppe wie,

<div class = "row"> 
<ul class="nav nav-tabs"> 
    <li><a href = "#">Create Department</a></li> 
    <li><a href = "#">Manage</a></li> 
</ul> 
<div class = "col-md-12"> 
    <br> 
    <form class = "form-vertical" role = "form"> 
     <div class = "col-md-12"> 
      <label for = "department" class = "control-label">Department Name:</label>     
     </div> 
     <div class = "form-group col-xs-5"> 
      <input type= "text" name = "department" class = "form-control"> 
     </div> 
     <div class = "form-group">    
      <button type = "submit" class = "btn btn-primary">Create</button> 
     </div> 
    </form> 
</div> 

JSFiddile