Question

I’m using the Twitter Bootstrap (v2.1.1) with a PHP site. I’m generating the navigation bar dynamically in a php script as the navigation bar will have different content if the user is logged in or out of the site. I’m having an issue with the login form input fields not having the correct spacing between them when I generate the site using PHP. Here’s the relevant PHP code for the login form:

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

I then echo that out – you can see the result at this jsFiddle:

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

Notice how there is no space between the Account Name, Password and Login button. You can see how this should look at:

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

I’ve worked out that I if create a carriage return before these 2 lines:

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

it then renders correctly in the browser.

You can see the version with these returns at this jsFiddle:

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

I’m not sure why the returns are important here but given they are (unless I’m missing something) anyone have any recommendatoins for generating the required new line characters in the PHP script?

I’ve tried adding a
but that made things worse.

Answer 1

The return is not the point since it’s actually not a return relevant for rendering. It’s the space between the elements that matters and is “generated” by the return. Simply do the following:

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

… and it should be fine.