Bootstrap：在文本框之间插入边距

Question

我有一个文本字段和一个包含以下代码的按钮：

<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
   <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
   <div class="form-group">
      <input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
   </div>
   <div>
      <button type="submit" class="btn btn-success">Confirm VAT number</button>
   </div>
</form>

结果如下所示：

如何确保文本框和按钮之间的白线？

Answer 1

您可以使用单独的类将margin-bottom应用于输入包装器。

你需要使用！important，因为.form-inline .form-group有一个margin-bottom：0属性。

<form class="form-inline" role="form" method="POST" action="{!! route('buyer_bid_create', ['id' => $lot->id ]) !!}">
   <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
   <div class="form-group margin-bottom">
      <input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
   </div>
   <div>
      <button type="submit" class="btn btn-success">Confirm VAT number</button>
   </div>
</form>

.margin-bottom{
  margin-bottom: 1.25rem;
}

http://codepen.io/tomanagle/pen/rLEGXz

Answer 2

在您的示例中，您可以在表单组

上添加一些自定义CSS

.form-inline .form-group {
margin-bottom: yourValue;
}

仅在您要将边距应用于所有表单组元素

时才执行此操作

或者您可以向元素添加新类并以这种方式应用样式。如果您只想将边距添加到特定的表单组元素

，请使用此方法

HTML

<div class="form-group form-group--margin-bottom">
  <input type="text" class="form-control" name="bid_value" id="bid_value" placeholder="VAT number">
</div>

CSS

.form-inline .form-group--margin-bottom {
margin-bottom: yourValue
}

您需要包含.form-inline类来覆盖bootstrap对该元素的特定定位。我不建议使用！important除非绝对必要，否则将来很难理解CSS

我有working version of the 2nd option on codepen