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