2017-02-01 139 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仍然保持在頂部,而不是像中心對齊按鈕那樣處於中心位置。 –