下拉列表旁邊的HTML 5/CSS按鈕

Question

我試圖在我的選擇選項下拉菜單旁邊添加一個提交按鈕。我似乎無法在消息框上正確對齊。

它坐落在一個基本的股利，但並不認爲這是必要的。

<form id="contact-form"> 
       <div class="row"> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <h5>Join us now</h5> 
          <div class="form-group"> 
           <label for="subject"> 
            Select Option</label> 
           <select id="subject" name="subject" class="form-control" required="required"> 
            <option value="na" selected="">Choose One:</option> 
            <option value="service">Nutritional Support</option> 
            <option value="suggestions">Nutritional Support and Exercise Pescription</option> 
            <option value="product">Single Nutrition or Exercise Plan</option> 
           </select> 
          </div> 

          <label for="name"> 
           Name</label> 
          <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> 
         </div> 
         <div class="form-group"> 
          <label for="email"> 
           Email Address</label> 
          <div class="input-group"> 
           <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> 
           </span> 
           <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div> 
         </div> 

        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="name"> 
           Message</label> 
          <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" 
           placeholder="Message"></textarea> 
         </div> 
        </div> 
        <div class="col-md-12"> 
         <button type="submit" class="btn btn-skin pull-right" id="btnContactUs"> 
          Send Message</button> 
        </div> 
       </div> 
       </form> 

Answer 1

我修改的行和列在你的代碼，你可以在這個JSFiddle找到它，希望這有助於。

<form id="contact-form"> 
<div class="row"> 
    <div class="col-md-6 col-xs-6"> 
     <h5>Join us now</h5> 
     <div class="row"> 
      <div class="col-md-6 col-xs-6"> 
       <div class="form-group"> 

        <label for="subject"> 
         Select Option 
        </label> 

        <select id="subject" name="subject" class="form-control" required="required"> 
         <option value="na" selected="">Choose One:</option> 
         <option value="service">Nutritional Support</option> 
         <option value="suggestions">Nutritional Support and Exercise Pescription</option> 
         <option value="product">Single Nutrition or Exercise Plan</option> 
        </select> 
       </div> 
      </div> 
      <div class="col-md-6 col-xs-6"> 
       <div class="form-group"> 
        <button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs"> 
         Send Message 
        </button> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6 col-xs-6"> 
       <div class="form-group"> 
        <label for="name"> 
         Name 
        </label> 
        <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> 
       </div> 

       <div class="form-group"> 
        <label for="email"> 
         Email Address 
        </label> 
        <div class="input-group"> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-envelope"></span> 
         </span> 
         <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /> 
        </div> 
       </div> 
      </div> 
      <div class="col-md-6 col-xs-6"> 
       <div class="form-group"> 
        <label for="name"> 
         Message 
        </label> 
        <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" 
           placeholder="Message"></textarea> 
       </div> 
      </div> 

     </div> 

    </div> 
</div>