Wie kann ich mein Bootstrap-Formular horizontal anzeigen lassen?

Question

Meine Frage betrifft Formulare im Bootstrap.

Ich musste von Bootstrap v3 zu v4 konvertieren. Jetzt bleibt meine Form vertikal. Was muss ich tun, um es horizontal zu bekommen?

screenshot of what it looked like in bootstrap 3

mein Code:

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

wenn mir jemand helfen könnte, wäre das fantastisch sein! danke für die Berücksichtigung meiner Anfrage

Answer 1

Ich habe Bootstrap 4 verwendet und leicht Ihre Markup geändert, um ein sehr ähnliches Ergebnis zu Ihrem Screenshot zu erzeugen. Ich habe auch PHP-Blöcke für den Zweck des Snippets entfernt.

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