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

时间:2016-08-25 08:14:00

标签: css twitter-bootstrap

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

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

结果如下所示:

bootstrap issue

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

2 个答案:

答案 0 :(得分:3)

您可以使用单独的类将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

答案 1 :(得分:1)

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

上添加一些自定义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