Невозможно выровнять кнопку рядом с текстовым полем в группе ввода

Question

У меня есть следующая форма, построенная с использованием синтаксиса HTML Razor.У меня есть 3 текстовых поля по горизонтали в одной строке.Третье текстовое поле должно иметь кнопку рядом с ним.Тем не менее, кнопка идет ниже текстового поля.Я не знаю, как поставить его рядом с текстовым полем.

Вот код HTML:

 @using (Html.BeginForm("Save", "Import", FormMethod.Post, new { id = "import" }))
 {    
   <div class="form-group col-xs-4">
     @Html.LabelFor(m => m.CustomerId)
     <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
        @Html.DropDownListFor(m => m.CustomerId, Model.Customers, new { @class = "form-control", @id = "customer" })
     </div>
   </div>

   <div class="form-group col-xs-4">
     @Html.LabelFor(m => m.Order.OrderName, "Order Name")
     <div class="input-group">
       <span class="input-group-addon"><i class="fa fa-map-marker fa-lg" aria-hidden="true"></i></span>
       @Html.TextBoxFor(m => m.Order.OrderName, new { @class = "form-control", data_rule_validOrder = "true", @id = "order" })
     </div>
     @Html.ValidationMessageFor(m => m.Order.OrderName)
   </div>

   <div class="form-group col-xs-4">
     @Html.LabelFor(m => m.Product.description, "Product")
     <div class="tt-container input-group">
       <span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
       @Html.TextBoxFor(m => m.Product.description, new { @class = "form-control", data_rule_validProduct = "true", @id = "product" })
      </div>

      <span><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
      @Html.ValidationMessageFor(m => m.Product.description)
   </div>

Вот как выровнены текстовые поля:

Я хочукнопка «ДОБАВИТЬ», чтобы показать рядом с текстовым полем.

ПОПЫТКИ: НА ОСНОВЕ ОТВЕТА DREAMTEK:

<div class="form-group col-xs-4" style="margin-top:20px">
  @Html.LabelFor(m => m.Product.description, "Product")
  <div class="tt-container input-group  d-inline-flex">
    <span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
    @Html.TextBoxFor(m => m.Product.description, new { @class = "form-control", data_rule_validProduct = "true", @id = "product" })
    <span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
  </div>
  @Html.ValidationMessageFor(m => m.Product.description)
</div>

Я получаю так:

Answer 1

Чтобы продемонстрировать, я показываю разметку в этом примере:

• Переместите кнопку внутри локального tt-container.
• Добавьте класс d-inline-flex к кнопке.
• Добавьте класс col ( flex: 1 ) к каждому элементу, который вы хотите растянуть.

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

<div class="form-group col-xs-4">
  Product
  <div class="tt-container input-group d-inline-flex">
    <span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
    <input type="text" id="product" class="form-control col" />
    <span><button type="button" id="addRow" class="btn btn-primary col">ADD</button></span>
  </div>

</div>

Answer 2

Вам просто нужно:

• Добавить input-group к своему внешнему div
• Добавить input-group-btn к span кнопке, например:

Как это:

        //...
        <div class="form-group input-group col-xs-4">
            @Html.LabelFor(m => m.Product.description, "Product")
            <div class="tt-container input-group">
                <span class="input-group-addon"><i class="fa fa-barcode" aria-hidden="true"></i></span>
                @Html.TextBoxFor(m => m.Product.description, new { @class = "form-control", data_rule_validProduct = "true", @id = "product" })
            </div>

            <span class="input-group-btn"><button type="button" id="addRow" class="btn btn-primary">ADD</button></span>
            @Html.ValidationMessageFor(m => m.Product.description)
        </div>