javascript - 在输入旁边添加按钮，水平表单样式 - 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

也许其中之一会起作用。您可以在 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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <h3 class="well">Custom Input Group</h3>

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

            </button>
            </span>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<hr>
<div class="container">
  <h3 class="well">Grid</h3>

  <div class="row">
    <form role="form" method="post" id="form">
      <div class="col-sm-7">
        <div class="form-group">
          <label>Názov položky</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label>Cena</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-sm-2">
        <label>Odstrániť</label>
        <div class="form-group">
          <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>