ブートストラップフォームを水平に表示させるにはどうすればよいですか？

Question

私の質問は、ブートストラップのフォームについてです。

ブートストラップv3からv4に変換する必要がありました。今度は私のフォームが縦に表示され続けます。私はそれを水平にするために何をする必要がありますか？

screenshot of what it looked like in bootstrap 3

私のコード：

<div class="col-4"> 
    <form method="post" action="index_s.php?action=add&id=<?php echo $row["product_id"]; ?>"> 
     <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:15px; padding:20px;" align="center"> 
      <img src="<?php echo $row["product_image"]; ?>" class="img-fluid" /><br /> 
      <h4 class="text-info"><?php echo $row["product_name"]; ?></h4> 
      <h4 class="text-danger">€ <?php echo $row["product_price"]; ?></h4> 
      <input type="text" name="quantity" class="form-conrol" value="1" /> 
      <input type="hidden" name="hidden_name" value="<?php echo $row["product_name"]; ?>" /> 
      <input type="hidden" name="hidden_price" value="<?php echo $row["product_price"]; ?>" /> 
      <input type="submit" name="add_to_cart" style="margin-top:5px;" class="btn btn-success" value="In winkelwagen" /> 
     </div> 
    </form> 
</div> 

誰も私を助けることができれば、それは素晴らしいだろう！ 私のリクエストを考慮していただきありがとうございます

Answer 1

私はブートストラップ4を使用しており、マークアップを少し変更して、スクリーンショットと非常によく似た結果になりました。また、スニペットの目的でPHPブロックを削除しました。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-4"> 
 
     <form method="post" action=""> 
 
     <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:15px; padding:20px;" align="center"> 
 
      <img src="http://placehold.it/200x300" class="img-fluid" /> 
 
      <h4 class="text-info">Product name</h4> 
 
      <h4 class="text-danger">€ 0.00</h4> 
 
      <input type="text" name="quantity" class="form-conrol" value="1" /> 
 
      <input type="hidden" name="hidden_name" value="Name" /> 
 
      <input type="hidden" name="hidden_price" value="Price" /> 
 
      <input type="submit" name="add_to_cart" style="margin-top:5px;" class="btn btn-success" value="In winkelwagen" /> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    
 
    <div class="col-4"> 
 
     <form method="post" action=""> 
 
     <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:15px; padding:20px;" align="center"> 
 
      <img src="http://placehold.it/200x300" class="img-fluid" /> 
 
      <h4 class="text-info">Product name</h4> 
 
      <h4 class="text-danger">€ 0.00</h4> 
 
      <input type="text" name="quantity" class="form-conrol" value="1" /> 
 
      <input type="hidden" name="hidden_name" value="Name" /> 
 
      <input type="hidden" name="hidden_price" value="Price" /> 
 
      <input type="submit" name="add_to_cart" style="margin-top:5px;" class="btn btn-success" value="In winkelwagen" /> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    
 
    <div class="col-4"> 
 
     <form method="post" action=""> 
 
     <div style="border:1px solid #333; background-color:#f1f1f1; border-radius:15px; padding:20px;" align="center"> 
 
      <img src="http://placehold.it/200x300" class="img-fluid" /> 
 
      <h4 class="text-info">Product name</h4> 
 
      <h4 class="text-danger">€ 0.00</h4> 
 
      <input type="text" name="quantity" class="form-conrol" value="1" /> 
 
      <input type="hidden" name="hidden_name" value="Name" /> 
 
      <input type="hidden" name="hidden_price" value="Price" /> 
 
      <input type="submit" name="add_to_cart" style="margin-top:5px;" class="btn btn-success" value="In winkelwagen" /> 
 
     </div> 
 
     </form> 
 
    </div>  
 
    </div> 
 
</div>