なぜデフォルトのレイアウトを使用してボタンが正しく配置されないのですか？

Question

の下にボタンを配置することができません。このボタンはlabelとinputで構成されています。それは常にlabelとinputの間に並んでいます。下のスクリーンショットを参照してください。あなたが最初form-groupにcol-xs-5を指定しているので、彼らが同じ行にある

スクリーンショット

<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

。動作するはずであることを削除してください。

Answer 2

あなたが2以上のdiv、テキストやボタンの1のための1つを作成する必要があり、この

<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

のようなウルのhtmlを書き換えることができます。

下記の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> 

あなたが行を使用する場合は、コンテンツは壁の横に行われますが、しかし、 rowに対してcol-xs-12を使用すると、いくらかのスペースが作成されます。あなたのコードで：

<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