的CSS對齊按鈕，形成標籤

Question

我如何對齊旁邊的一個html表單標籤上的按鈕，我使用的引導到目前爲止，我建立了這個：

<!-- Wrap all page content here --> 
<div id="wrap"> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       ... 
      </div> 

      <div id="navbar" class="navbar-collapse collapse"> 
       <form action="test" method="post" class="navbar-form navbar-right"> 
        <div class="form-group"> 
         <input type="text" name="email" id="email" placeholder="Email" class="form-control"> 
        </div> 
        <div class="form-group"> 
         <input type="password" name="password" id="password" placeholder="Passwort" class="form-control"> 
        </div> 
        <button type="submit" class="btn btn-success">Login</button> 
       </form> 

       // Here I want to add a button     
       <button type="submit"></button> 
      </div> 
     </div> 
    </div> 
</div> 

我的表格後創建的按鈕應該是與表單標籤內的按鈕對齊，我該怎麼做？

Answer 1

你應該與.navbar-btn和.navbar-right類如創建按鈕<button type="button" class="btn btn-default navbar-btn navbar-right">Label</button>

<!-- Wrap all page content here --> 
<div id="wrap"> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       ... 
      </div> 

      <div id="navbar" class="navbar-collapse collapse"> 
       <form action="test" method="post" class="navbar-form navbar-right"> 
        <div class="form-group"> 
         <input type="text" name="email" id="email" placeholder="Email" class="form-control"> 
       </div> 
       <div class="form-group"> 
        <input type="password" name="password" id="password" placeholder="Passwort" class="form-control"> 
       </div> 
       <button type="submit" class="btn btn-success">Login</button> 
      </form> 

      <button type="button" class="btn btn-default navbar-btn navbar-right">Sign in</button> 
     </div> 
    </div> 
</div> 

PS如果你想讓它之前的形態位置右邊的按鈕。

Answer 2

您不能在窗體外添加submit按鈕。要做到這一點，你將需要：

1）與特定的類名，包含所有input form除了submit按鈕，創建div您form內。

2）然後在添加此您CSS：

.<your_new_div_class_form> .<your_class_submit_button> { 
    display: inline; 
} 

Answer 3

您只需將類.btn（和您需要的類.btn-{level}）添加到<button>元素。

Answer 4

你可以只添加表單標籤本身內部的按鈕，並給它一個類型按鈕，並在JavaScript的onClick

<div id="wrap"> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-default navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       ... 
      </div> 

      <div id="navbar" class="navbar-collapse collapse"> 

       <form action="test" method="post" class="navbar-form navbar-right"> 
        <div class="form-group"> 
         <input type="text" name="email" id="email" placeholder="Email" class="form-control"> 
        </div> 
        <div class="form-group"> 
         <input type="password" name="password" id="password" placeholder="Passwort" class="form-control"> 
        </div> 
        <button type="submit" class="btn btn-success">Login</button> 
        <button type="button" value="submit" class="btn btn-primary" onclick="doSOmething();" >OK</button> 
       </form> 



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