ブートストラップでテーブル内の入力とボタンをインライン化する方法

Question

テーブル内の同じ行に入力フィールドとボタンを得る方法を解決しようとしています。

<tr class="no-border"> 
    <td colspan="2" class="hidden-xs"></td> 
    <td></td> 

    <td> 
    <form class="form-inline" action="add-to-cart/{{this._id}}" method="get"> 
     <input type="text" name="numDays" id="numDays" class="numDays"> 
     <button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button> 
    </form> 
    </td> 

</tr> 

Answer 1

それでも

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<table class="table"> 
 
    <thead class="thead-inverse"> 
 
    <tr> 
 
     <th>what</th> 
 
     <th>huh</th> 
 
     <th>wait</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="no-border"> 
 
     <td colspan="2" class="hidden-xs"></td> 
 
     <td></td> 
 

 
     <td> 
 
     <form class="form-inline" action="add-to-cart/{{this._id}}" method="get"> 
 
      <div class="input-group"> 
 
      <input type="text" name="numDays" id="numDays" class="numDays form-control"> 
 
      <span class="input-group-btn"> 
 
      <button type="submit" name="button" class="btn btn-success" id="bt">Click <i class="fa fa-angle-right"></i></button> 
 
      </span> 
 
      </div> 
 
     </form> 
 
     </td> 
 

 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

<tr class="no-border"> 
    <td colspan="2" class="hidden-xs"></td> 
    <td></td> 

    <td style="width:70%;"> 
    <form class="form-inline" action="add-to-cart/{{this._id}}" method="get"> 
     <input type="text" name="numDays" id="numDays" class="numDays"> 
     <button type="submit" name="button" class="btn btn-success">Click <i class="fa fa-angle-right"></i></button> 
    </form> 
    </td>   
</tr>