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>

以下是文本框的对齐方式：

我希望“ ADD”按钮显示在文本框旁边。

尝试：基于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>

输入组中文本框旁边的按钮无法对齐

2 个答案: