在输入旁边添加按钮，水平表单样式 - Bootstrap

Question

我正在尝试在输入旁添加删除按钮。

我目前的代码：

<form role="form" method="post" id="form">
<div class="form-group">
      <div class="col-sm-9 ">
       <span>Názov položky</span>
       <input type="text" class="form-control">
      </div>
      <div class="col-sm-3 ">
        <span>Cena</span>
        <input type="text" class="form-control">
        <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
    </div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>

生成输出：

红色按钮不在最后一个输入的右侧。

Answer 1

也许其中一个会起作用。您可以在$sql = "select first_name, last_name from swimming where gender='m'"; $results = mysqli_query($link,$sql); if ($results->num_rows > 0) { $options = ''; // output data of each row while($row = $results->fetch_assoc()) { $fname=$row["first_name"]; $lname=$row["last_name"]; $options .= "<option value= >" . $row["first_name"] . " " . $row["last_name"]."</option>"; } } else { echo "0 results"; } echo $options; $link->close(); ?> 内创建一些边距，以便按钮不会触及输入或使用网格。

参见工作示例片段。

input-group

.input-group .input-group-btn.input-space {
  padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

Answer 2

您必须按照帮助页面上的说明使用input-group。

这里是相关代码

    <span>Cena</span>
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </div>
    </div>

Answer 3

这可能会在移动设备上中断，但在CodePen

中看起来不错

<form role="form" method="post" id="form">
  <div class="row">
    <div class="col-sm-8">
      <span>Názov položky</span>
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-3">
      <span>Cena</span>
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-1">
      <br/>
      <button class="btn btn-danger btn-md">
        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <p></p>
  <div>
    <button class="add_field_button btn btn-success btn-md">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
  </div>
</form>