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>';

......应该没事。

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

1 个答案: