bootstrap怎么讓button和input並列一行

1.由於實習好久沒時間寫博客了，今天研究畢業設計的前端頁面發現，想實現一個密碼框以及旁邊有一個可以是否顯示的按鈕用來查看密碼，解決了在此記錄一下

沒改善之前效果如下圖：

2.確定需要實現的功能：a.實現顯示按鈕顯示密碼的功能；b.實現密碼和實現按鈕在一行的（順便提醒下，本人使用的是bootstrap的樣式！）

a.實現顯示按鈕實現密碼的功能：

前端密碼框的代碼：

<div class="form-group">
         <label>交易密碼</label>
          <input type="password" class="form-control form-control-pwd" name="paypwd"
           id="paypwd" placeholder="您的交易密碼（6位數字）還未設置"
         th:value="${user.paypwd}" style="width: 86%">
     <input type="button" id="btn" class="btn-blue" value="點擊顯示密碼" />
   <span class="help-block"></span>
 </div>

js方法代碼（當鼠標點擊顯示密碼，離開隱藏密碼）：

<script>
        window.onload=function(){
              var btn=document.getElementById("btn");
              var paypwd=document.getElementById("paypwd")
              btn.onmousedown=function(){
              paypwd.type="number"
              };
              btn.onmouseup=btn.onmouseout=function(){
              paypwd.type="password"
               }
        }
     </script>

效果如圖：

未點擊時：

點擊時：

b.實現按鈕和文本框在同一行（其實上面已經實現了，但是我還是得把代碼分享出來，嘿嘿！）

大家要注意

form-control有兩個屬性影響換行.

.form-control {
width:100%;
display: block;
}

我們可以新增一個class，例如我這是**form-control-pwd

.form-control-pwd {
width:200px;
display:inline;
}

這個css要放到bootstrap.css下面，然后重新編譯頁面，大功告成！

如有錯誤，請大佬們指出讓本萌新改正！下次見啦！