Twitter Bootstrap with MVC padding between inputs

Question

I am using MVC and bootstrap to create a website and have mostly been experimenting with it and found the following:

Whilst creating an in-line form in the navbar I noticed that the spacing between input elements were not correct. I think I figured out it was caused by the markup generated by the Razor engine there is no white space between the elements they are rendered next to each other without any spacing. But am not sure how to resolve it.

Here is a jsfiddle for the invalid behaviour.

Razor

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
}    

Html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email"><input type="password"  class="input-small" placeholder="Password">
</form>

Here is a jsfiddle for the valid behaviour.

Html

<form class="navbar-form">
    <input type="text" class="input-small" placeholder="Email">
    <input type="password" class="input-small" placeholder="Password">
</form>

Any thoughts on how to fix this? I am guessing I am missing something with bootstrap. ​

Answer 1

From what I can tell, you only get that behaviour if the input elements are the direct children of the form element.

try

@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
{
<div>
    @Html.TextBoxFor(m => m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.UserName) })
    @Html.PasswordFor(m => m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m => m.Password) })
</div>
}   

and you should get whitespace between the input elements.