Почему кнопка неправильно выравнивается по умолчанию?

Question

Я не могу выровнять свою кнопку под form-group, которые состоят из label и input. Он всегда совмещается между label и input. См. Снимок экрана ниже.

Скриншот

<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

Они находятся на той же строке, потому что вы указали col-xs-5 на первом form-group. Попробуйте удалить то, что должно работать.

Answer 2

вы можете переписать ур HTML как этот

<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

Вы должны создать еще 2 DIV, один для текста и один для кнопки.

Пожалуйста, попробуйте ниже html.

Если вы хотите поместить кнопку Создать рядом с html, попробуйте ввести код ниже.

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

Или Если вы хотите добавить кнопку Создать после текста, то.

<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

Ну, если вы хотите, чтобы решить текущие проблемы только попробуйте этот код, пожалуйста.

<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

Если вы хотите принять вашу кнопку в форме, то вы должны создать еще одну строку, как эта мысль:

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

Если вы используете строку, то содержимое будет иметь место у стены, но если вы используете col-xs-12 против row, тогда он создаст некоторое пространство. По вашему коду:

<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

Вы можете поместить этикетку, из стороны в группы параметров, как,

<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