css - 使用输入组在输入和按钮之间添加间隙

Question

如何在 Bootstrap 3 上使用 input-group 在输入和按钮之间添加间隙？ <强> jsFiddle

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Example</h1>
            <div class="input-group">
               <input type="text" class="form-control">
               <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>
            </div>
        </div>
    </div>
</div>

Answer 1

将您的自定义类添加到 class="input-group-btn" 并使用填充来创建空间。

参见工作示例。 > class="input-group-btn 输入空间"

.input-group-btn.input-space {
  padding-left: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Example</h1>

      <div class="input-group">
        <input type="text" class="form-control"> <span class="input-group-btn input-space">
                    <button class="btn btn-default" type="button">Go!</button>
               </span>

      </div>
    </div>
  </div>
</div>