Bootstrap的Jumbotron示例如何在导航栏元素中创建空间

Question

在Bootstrap Jumbotron示例中，用户名，密码和登录按钮的间距没有JavaScript的帮助（我在两者中都禁用了JS并刷新了），边距，填充等等。这些元素如何间隔？ div.form-group对我来说是一个谜。我试图自己模仿代码。我正在使用Bootstrap的CSS和JS。在我的HTML中，我在三个元素之间没有空格。在禁用JS并尝试各种样式后，我无法解释如何实现Bootstrap Jumbotron示例中的间距。除了间距的差异，我的元素的大小略有不同。我的密码输入为<xsl:for-each select="Product"> <xsl:variable name="var3_current" select="."/> <Items> <xsl:for-each select="Items/Item"> <xsl:for-each select="Changes/Change/AffectedItems/AffectedItem"> <xsl:if test="floor(@itemIdentifier) = floor(Changes/Change/AffectedItems/AffectedItem/@itemIdentifier)"> <Item> <xsl:attribute name="itemIdentifier"> <xsl:value-of select="floor(@itemIdentifier)"/> </Item> </xsl:if> </xsl:for-each> </xsl:for-each> </Items> <Changes> <Change> <AffectedItems> <AffectedItem> <xsl:attribute name="itemIdentifier"> <xsl:value-of select="floor(Changes/Change/AffectedItems/AffectedItem/@itemIdentifier)"/> </AffectedItem> </AffectedItems> </Change> </Changes> </xsl:for-each> 宽，填充<Items/> 和边框160px，而正确的Jumbotron示例为12px宽。两个计算的宽度都是1px。如何在引用的Bootstrap示例中获得电子邮件，密码和登录按钮之间的间距？

有一个类似但不同的question，如何让它与Bootstrap中的示例不同。

170px

以下是整页：

auto

Answer 1

背后的逻辑： - Bootstrap Jumbotron 链接上的元素显示为inline-blocks，而内联块往往表现为“字”一个句子，并且因为单词之间有空格来区分它们（分隔符），同样HTML呈现器也会在属性为display:inline-block;

的元素之间添加空格

问题： - 您的元素正在被视为因为它们具有（隐藏）空间（以新行）他们之间。

<form class="navbar-form navbar-right">
  <div class="form-group">
     <input type="text" placeholder="email" class="form-control"></div>
     <div class="form-group"><input type="password" placeholder="password" class="form-control"></div>
     <button type="success" class="btn btn-success">Sign In</button>
</form>

解决方案： - 因此，为了避免这种类型的行为，您必须将它们写成它们之间没有空格（或new-line）。

一个。你可以在一行中写出整个有关元素的HTML。

B中。写下HTML。

<form class="navbar-form navbar-right"><div class="form-group">
     <input type="text" placeholder="email" class="form-control"></div><div class="form-group">
     <input type="password" placeholder="password" class="form-control"></div><button type="success" class="btn btn-success">
     Sign In</button>
</form>

<强> CodePen Demo!

注意： - 现在，我重读了您的问题，我对您的要求有了更好的了解，如果我没有错，您希望发生相反的情况。所以对于你的解决方案，

1. 确保元素的display属性设置为inline-block。
2. 同时确保元素不继承float:left (or right)的属性，如果是，则可以如here所示停止浮动。