Bootstrap-表单内联元素之间的间距 [英] Bootstrap - spacing between form-inline elements

问题描述

在Bootstrap 3中，内联表单（ http://getbootstrap.com/css/#forms-inline ）-
我似乎找不到 .form-group 类之间的间距的原因。

In Bootstrap 3, inline forms (http://getbootstrap.com/css/#forms-inline) - I cannot seem to find the reason for the spacing between .form-group classes.

小提琴： https://jsfiddle.net/6ek1oa3s/1/

我问的原因是因为在我的开发环境中，我有这个间距，但是在使用gulp构建之后，在部署版本中，间距消失了。

The reason I'm asking is because on my dev environment I have this spacing, but after I build with gulp, in the deployment version - the spacing is gone.

推荐答案

将由属性 inline-block 生成的空间与处理元素进行比较作为文本，如果您在标记上的每个行上都有一个新元素，则会生成一个空格，并且每个元素都是一个新单词。

That space is generated by the property inline-block is compared to treating the elements as text, if you have on your markup each element on a new line this generates a space and each element is a "new word".

检查代码段

section {
  background:white;
  margin:20px auto;
}
div {
  display:inline-block;
  height:50px;
  width:30%;
  margin:20px auto;
  background:red;
  border:thin solid orange
}

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

我猜想，当您使用gulp进行构建时，您会缩小html，使html在项目之间没有空格，然后又没有空格使所有元素变成一个单词。

I guess when you build with gulp you minify your html making your html with no spaces between items and then has no space making all elements "one word".

检查代码段

section {
  background:white;
  margin:20px auto;
}
div {
  display:inline-block;
  height:50px;
  width:30%;
  margin:20px auto;
  background:red;
  border:thin solid orange
}

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

要解决此问题，您可以在样式中添加 margin-right 值，例如：

To solve this you can add on your style a margin-right value like:

.form-inline .form-group {
  margin-right:4px;
}

这篇关于Bootstrap-表单内联元素之间的间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！