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

<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>

Answer 2

＆＃13;

<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>

＆＃13;

如何在Bootstrap中内联表内的输入和按钮

2 个答案: