2017-02-01 107 views
0

我试图垂直对齐内联表单,但是,我无法这样做。以下是我使用Bootstrap的代码。你能帮忙吗?垂直对齐引导

这不是一个重复的问题。我在此之前已经回顾了其他10个问题,最后在此发布我自己的内容。

<div class="row"> 
    <div class="col-md-12"> 
     <form> 
      <div class="form-group"> 
       <label class="control-label">Label</label> 
       <input type="text" class="form-control" /> 
       <button class="btn btn-default" type="button">Button</button> 
      </div> 
     </form> 
    </div> 
</div> 

试过了。不工作。 下面是更新后的代码: -

<div class="row"> 
    <div class="col-md-12"> 
     <form class="form-inline"> 
      <input type="text" class="form-control" /> 
      <button class="btn btn-default" type="button">Button</button> 
     </form> 
    </div> 
</div> 

下面是快照..怎么在上面输入框棒: enter image description here

+0

即正在工作检查该片段 – neophyte

+0

什么我的代码有问题。它真的不起作用。 –

+0

完整的html代码 – neophyte

回答

1

只需添加class="form-inline"形成标签

<!doctype html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
     
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     
 
     <form class="form-inline"> 
 
      <div class="form-group"> 
 
      
 
      
 
       <label class="control-label">Label</label> 
 
       
 
       
 
       <input type="text" class="form-control" > 
 
       
 
       <button class="btn btn-default" type="button">Button</button> 
 
       </div> 
 
       
 
      
 
     </form> 
 
    
 
</div> 
 
     </div> 
 
     </div> 
 
</body> 
 
    </html>

+0

不工作。试过了。 Txt Box仍然保持在顶部,而不是像中心对齐按钮那样处于中心位置。 –