Question

图片在这里 http://imgur.com/a/4gP06 我基本上希望 - 按钮直接留在＆＃34; 1＆＃34;和＃34; 1＆＃34;的右边。这些行正在填充模型中带有spring的数据。

<table  class="table table-striped">
    <thead>
    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Total Price</th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="cartLine : ${cartLines}">
        <td>
        <a  th:href="@{|/product/${cartLine.product.id}|}" th:text="${cartLine.product.title}"></a>
        </td>
        <td>
            <p>
            <form th:action="@{|/cart/decrease/${cartLine.product.id}|}"  method="post">
                <input type="submit" class="btn btn-primary"  id="decreaseCartLine"  value="-"/>
            </form>
            <p th:text="${cartLine.quantity}"></p>
            <form th:action="@{|/cart/increase/${cartLine.product.id}|}"  method="post">
                <input type="submit" class="btn btn-primary"  id="increaseCartLine"  value="+"/>
            </form>
            </p>
        </td>

        <td th:text="${cartLine.product.price}">price</td>
        <td th:text="${cartLine.totalPrice}">total price</td>


        <td><form th:action="@{|/cart/remove/${cartLine.product.id}|}"  method="post">
            <input type="submit" class="btn btn-primary"  id="removeCartLine"  value="Remove Item"/>
        </form>
        </td>
    </tr>
    </tbody>
</table>

Answer 1

如何将三个项目放入引导行？您可以更多地优化它，但以下似乎对我来说很好：

  <div class="container fluid" style="max-width: 200px;">
   <div class="row">
    <div class="col-4"><form th:action="@{|/cart/increase/${cartLine.product.id}|}"  method="post"><input type="submit" class="btn btn-primary"  id="decreaseCartLine"  value="-"/></div>
    <div class="col-4"><p th:text="${cartLine.quantity}"></p></div>
    <div class="col-4"><form th:action="@{|/cart/increase/${cartLine.product.id}|}"  method="post"><input type="submit" class="btn btn-primary"  id="increaseCartLine"  value="+"/></div>
    </form></div>

Answer 2

尝试不使用'p'标签。因为，段落标记通常采用全宽。

Answer 3

<强>更新

检查演示here

另一个选项，不会在table

中使用td结构更改现有代码

<td class="qtyWidth">
        <table>
          <tr>
            <td>
              <form th:action="@{|/cart/decrease/${cartLine.product.id}|}" method="post">
                <input type="submit" class="btn btn-primary" id="decreaseCartLine" value="-" />
              </form>
            </td>
            <td>
              <span class="qtyNumber" th:text="${cartLine.quantity}">11</span>
            </td>
            <td>
              <form th:action="@{|/cart/increase/${cartLine.product.id}|}" method="post">
                <input type="submit" class="btn btn-primary" id="increaseCartLine" value="+" />
              </form>
            </td>
          </tr>


        </table>
      </td>

CSS：

.qtyWidth {
  width: 150px;
}
.qtyNumber {
 margin: 0 5px;
}

尝试使用引导功能input-group组件

检查工作演示here

HTML：

   <table class="table table-striped">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total Price</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="cartLine : ${cartLines}">
      <td>
        <a th:href="@{|/product/${cartLine.product.id}|}" th:text="${cartLine.product.title}"></a>
      </td>
      <td class="qtyWidth">
        <div class="input-group">
          <span class="input-group-btn">
                          <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
                              <span class="glyphicon glyphicon-minus"></span>
          </button>
          </span>
          <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
          <span class="input-group-btn">
                          <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
                              <span class="glyphicon glyphicon-plus"></span>
          </button>
          </span>
        </div>
      </td>

      <td th:text="${cartLine.product.price}">price</td>
      <td th:text="${cartLine.totalPrice}">total price</td>


      <td>
        <form th:action="@{|/cart/remove/${cartLine.product.id}|}" method="post">
          <input type="submit" class="btn btn-primary" id="removeCartLine" value="Remove Item" />
        </form>
      </td>
    </tr>
  </tbody>
</table>

CSS：

.form-control {
  height: auto;
}
.qtyWidth {
  width: 150px;
}

试图将两个按钮和段落保持在表格中同一行的同一水平线上

3 个答案: