Bootstrap：表单显示(Bootstrap: Form display)

 我喜欢bootstrap，但是当涉及到表单时，它真的很不方便。 我自己上了一个评论框的课程，该评论框应该在顶部流动（理想情况下在智能手机屏幕上推送其他元素）。 我无法弄清楚如何将姓名和姓氏放在同一条线上 。 我做了以下演示： 
 
 
 
 
 
  
.comment-box-container {
  position: absolute;
  top: 812px;
  right: 40px;
  z-index: 1001;
  width: 500px;
  padding-top: 0px;
  margin-top: 0px;
}
.comment-box {
  background-color: white;
  border: 1px solid #DCE0E0;
  padding: 10px;
}
.comment-box-header {
  background-color: rgba(38, 173, 228, 0.9);
  color: white;
  height: 40px;
  padding: 5px;
  padding-left: 10px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: normal;
  margin-right: 0px;
  margin-left: 0px;
}
/* Remove rounded borders on input fields */

.form-control {
  border-radius: 0;
}
/* Disable the ability to resize textareas */

textarea {
  resize: none;
}
 
  
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="comment-box-container">
  <div class="comment-box-header">
    Kontakt
  </div>
  <div class="comment-box">
    <form role="form" class="forminline">
      <div class="form-group">
        <input type="surname" class="form-control" placeholder="Vorname" id="surname">
      </div>
      <div class="form-group">
        <input type="name" class="form-control" placeholder="Name" id="name">
      </div>
      <div class="form-group">
        <input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" id="email">
      </div>
      <div class="form-group">
        <textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
      </div>
      <div class="form-group">
        <button class="btn" type="submit">Interesse bekunden</button>
      </div>
    </form>
  </div>
</div>
 
 
 
 
 
 我想在同一行显示姓氏和名字，在整个宽度上显示中心的按钮。 可能？ （PS使用下面的Stack Overflow是什么类型的按钮？） 

I like bootstrap, but when it comes to forms it's really inconvenient. I made myself classes for a comment box that should flowing on the top and (ideally push other elements below on smartphone screens). I couldn't figure out how to have the name and surname on the same line. I've made following demo:
 
 
 
 
 
  
.comment-box-container {
  position: absolute;
  top: 812px;
  right: 40px;
  z-index: 1001;
  width: 500px;
  padding-top: 0px;
  margin-top: 0px;
}
.comment-box {
  background-color: white;
  border: 1px solid #DCE0E0;
  padding: 10px;
}
.comment-box-header {
  background-color: rgba(38, 173, 228, 0.9);
  color: white;
  height: 40px;
  padding: 5px;
  padding-left: 10px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: normal;
  margin-right: 0px;
  margin-left: 0px;
}
/* Remove rounded borders on input fields */

.form-control {
  border-radius: 0;
}
/* Disable the ability to resize textareas */

textarea {
  resize: none;
}
 
  
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="comment-box-container">
  <div class="comment-box-header">
    Kontakt
  </div>
  <div class="comment-box">
    <form role="form" class="forminline">
      <div class="form-group">
        <input type="surname" class="form-control" placeholder="Vorname" id="surname">
      </div>
      <div class="form-group">
        <input type="name" class="form-control" placeholder="Name" id="name">
      </div>
      <div class="form-group">
        <input type="telephone" class="form-control" placeholder="Telefon" id="telephone">
      </div>
      <div class="form-group">
        <input type="email" class="form-control" placeholder="Email" id="email">
      </div>
      <div class="form-group">
        <textarea class="form-control" id="comments" name="comments" placeholder="Nachricht" rows="5"></textarea>
      </div>
      <div class="form-group">
        <button class="btn" type="submit">Interesse bekunden</button>
      </div>
    </form>
  </div>
</div>
 
 
 
 
 
I'd like to display surname and name on the same line and the button in the center over the whole width. Possible? (P.S. What kind of buttons is Stack Overflow using below?)

原文：