Question

我的问题是关于bootstrap中的表单。

我必须从bootstrap 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

我使用了bootstrap 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>

如何让我的引导表单水平显示？

1 个答案: