Как разместить два входа рядом друг с другом в bootstrap 4

Question

Я хочу разместить текстовый ввод и кнопку рядом друг с другом, с полем в 10 пикселей между ними.

С этим кодом я получаю результат, который вы видите на загруженной фотографии.

<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 размера, только цвета и размер шрифта ...

Answer 1

См. Ниже структуру и 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>

Answer 2

Способ bootstrap: используйте классы 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>

Answer 3

Вы можете использовать класс col-md-6 вместо float-left или right.