Question

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

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

Answer 1

将属性inline-block生成的空间与将元素视为文本进行比较，如果您在标记上有新行上的每个元素，则会生成一个空格，并且每个元素都是＆＃34; new字＆＃34;

检查代码段

＆＃13;

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

＆＃13;

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

＆＃13;

我想当你用gulp构建时，你缩小你的html使你的html在项目之间没有空格，然后没有空间制作所有元素＆＃34;一个单词＆＃34;。

检查代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 2

在表单

中向表单组添加右侧或左侧边距

Answer 3

您可以在开发人员工具上看到间距来自哪里。

.form-group {
    margin-bottom: 15px;
}

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

3 个答案: