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

Answer 2

您必须按照帮助页面上的说明使用输入组 。

这里相关代码

    <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>