Twitter Bootstrap 导航栏 - 表单输入之间的空间

Question

我正在使用带有 PHP 站点的 Twitter Bootstrap (v2.1.1)。我在 php 脚本中动态生成导航栏，因为如果用户登录或退出站点，导航栏将具有不同的内容。当我使用 PHP 生成网站时，登录表单输入字段之间的间距不正确。以下是登录表单的相关 PHP 代码：

$loginLink .= '<form class="navbar-form pull-right">';
$loginLink .= '<input class="span2" type="text" placeholder="Account Name">';
$loginLink .= '<input class="span2" type="password" placeholder="Password">';
$loginLink .= '<button type="submit" class="btn">Log in</button>';
$loginLink .= '</form>';

然后我将其回显 - 你可以在这个 jsFiddle 上看到结果：

http://jsfiddle.net/fmdataweb/PugbE/

注意帐户名、密码和登录按钮之间没有空格。你可以看看这应该是怎样的：

http://twitter.github.com/bootstrap/examples/hero.html

我已经确定如果在这两行之前创建一个回车：

<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Log in</button>

然后它会在浏览器中正确呈现。

您可以在这个 jsFiddle 中查看具有这些返回的版本：

http://jsfiddle.net/fmdataweb/CqAPr/

我不确定为什么返回在这里很重要，但考虑到它们（除非我遗漏了什么），任何人都可以推荐在 PHP 脚本中生成所需的换行符吗？

我尝试添加一个
，但这让事情变得更糟。

Answer 1

返回不是重点，因为它实际上不是与渲染相关的返回。重要的是元素之间的空间，并且由返回“生成”。只需执行以下操作：

$loginLink .= '<form class="navbar-form pull-right">';
$loginLink .= '<input class="span2" type="text" placeholder="Account Name"> '; // notice space here
$loginLink .= '<input class="span2" type="password" placeholder="Password"> '; // and here
$loginLink .= '<button type="submit" class="btn">Log in</button>';
$loginLink .= '</form>';

...应该没问题的。