如何在引导程序 4 中将两个输入并排放置答案

【问题标题】：How to place two input next to each other in bootstrap 4如何在引导程序 4 中将两个输入并排放置
【发布时间】：2020-01-24 18:32:32
【问题描述】：

我想将文本输入和按钮并排放置，它们之间留有大约 10px 的边距。

通过这段代码，我得到了你在上传照片上看到的结果。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="float-left">
    <input type="number" class="form-control item_page_item_db w-50" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
  </div>
  <div class="float-left">
    <button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
    </button>
  </div>
  <div class="clearfix"></div>
</div>

我希望它们彼此靠近，并以正确的方式垂直居中。现在，他们没有任何 css 大小，只有颜色和字体大小......

【问题讨论】：

请注意，<link> 标签不使用也不需要结束斜杠，并且在 HTML 中从来没有。

标签： html css bootstrap-4

【解决方案1】：

引导方式：使用col类创建宽度（如下图）

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
  <div class="col-sm-2">
    <input type="number" class="form-control" value="1">
    </div>
    <div class="col-sm-10">
    <button class="btn btn-outline-secondary" type="button">
      <i class="fa fa-shopping-basket"></i>
      Kosárba helyezem
    </button>
    </div>
  </div>
</div>

纯CSS方式：

.cont {
  display: flex;
}

input {
  width: 100px !important; /**use specific width**/
  margin-right: 10px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="cont">
  <input type="number" class="form-control" value="1">
  <button class="btn btn-outline-secondary" type="button">
    <i class="fa fa-shopping-basket"></i>
    Kosárba helyezem
  </button>
</div>

【讨论】：

【解决方案2】：

请参阅下面的结构和 css。希望对您有所帮助。

.col-sm-6 input[type="number"]{width:100%}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-6">
    <input type="number" class="form-control item_page_item_db" id="quantity<?php echo intval($kat['termek_id']); ?>" value="1">
  </div>
  <div class="col-sm-6">
    <button class="btn btn-outline-secondary add_to_cart_button" data-product-id="<?php echo intval($kat['termek_id']); ?>" type="button"><i class="fa fa-shopping-basket" aria-hidden="true"></i> Kosárba helyezem
    </button>
  </div>
  <div class="clearfix"></div>
</div>
</div>

【讨论】：

【解决方案3】：

您可以使用 col-md-6 类代替 float-left 或 right。

【讨论】：

为什么？这将在它们之间提供更大的空间。