2017-06-11 8 views
1

1つのセルテーブルにいくつかのフォームがあるため、ブートストラップの水平入力とボタンの設定に問題があります。このように:フォームを水平に設定する方法は?ブートストラップ

<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に設定する必要がありますか?

このように今それが見えます: enter image description here

答えて

1

があなたのCSSに以下を追加してください:

td * { 
    display: inline-block; 
} 

それとも、新しいCSSルールをインライン<td class="inline-form">のようになりたいに新しいクラスを追加します:

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

.inline-form * { 
 
    display: inline-block; 
 
}
<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>

+1

Thx、それは動作します:) – wenus

関連する問題