Bootstrap-表单内联元素之间的间距

Question

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

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

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

Answer 1

将属性生成的空间inline-block与将元素视为文本进行比较，如果标记上的每个元素都在换行符上，则会生成一个空格，并且每个元素都是一个“新单词”。

检查代码段

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在项目之间没有空格，然后没有空格使所有元素变成“一个单词”。

检查代码段

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值，例如：

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