Question

我在bootstrap中设置水平输入和按钮时遇到问题，因为我在一个单元格表中有几个表单。像这样：

<td>

    <form class="form-horizontal" method="post" action="/cart/decrease" >
        {{ csrf_field() }}
        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini" value="-" name="minus">
        </div>
    </form>
    <div>
    <input class="span1" id="appendedInputButtons" size="16"
           type="text" value="{{$cartProduct->getQuantity()}}" readonly>
    </div>
    <form class="form-horizontal" method="post" action="/cart/increase">
        {{ csrf_field() }}

        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini" value="+" name="plus">
        </div>
    </form>
    <form class="form-horizontal" method="post" action="/cart/remove">
        {{ csrf_field() }}

        <div class="input-append">
            <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
            <input type="submit" class="btn btn-mini btn-danger" value="delete" name="delete">
        </div>
    </form>

</td>

我应该在div中使用每个表单并设置它们float:left吗？

现在它看起来像这样：

Answer 1

尝试将此添加到您的css：

td * {
  display: inline-block;
}

或者使用新的css规则向您想要内联的新类添加<td class="inline-form">：

.inline-form * {
  display: inline-block;
}

＆＃13;

.inline-form * {
  display: inline-block;
}

＆＃13;

<table>
  <td class="inline-form">

    <form class="form-horizontal" method="post" action="/cart/decrease">
      {{ csrf_field() }}
      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini" value="-" name="minus">
      </div>
    </form>
    <div>
      <input class="span1" id="appendedInputButtons" size="16" type="text" value="{{$cartProduct->getQuantity()}}" readonly>
    </div>
    <form class="form-horizontal" method="post" action="/cart/increase">
      {{ csrf_field() }}

      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini" value="+" name="plus">
      </div>
    </form>
    <form class="form-horizontal" method="post" action="/cart/remove">
      {{ csrf_field() }}

      <div class="input-append">
        <input type="hidden" value="{{$cartProduct->getProduct()->id}}" name="productId">
        <input type="submit" class="btn btn-mini btn-danger" value="delete" name="delete">
      </div>
    </form>

  </td>
</table>

＆＃13;

如何设置几个水平的表格？引导

1 个答案: