title: Twitter Bootstrap with MVC padding between inputs
body: <p>I am using MVC and bootstrap to create a website and have mostly been experimenting with it and found the following:</p>
  
  <p>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.</p>
  
  <p><em>Here is a <a href="http://jsfiddle.net/NPXgH/" rel="nofollow">jsfiddle</a> for the invalid behaviour.</em></p>
  
  <h2>Razor</h2>
  
  <pre><code>@using (Html.BeginForm("JsonLogin", "Account", FormMethod.Post, new { @class = "navbar-form" }))
  {
      @Html.TextBoxFor(m =&gt; m.UserName, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m =&gt; m.UserName) })
      @Html.PasswordFor(m =&gt; m.Password, new { @class = "input-small", placeholder = @Html.DisplayNameFor(m =&gt; m.Password) })
  }    
  </code></pre>
  
  <h2>Html</h2>
  
  <pre><code>&lt;form class="navbar-form"&gt;
      &lt;input type="text" class="input-small" placeholder="Email"&gt;&lt;input type="password"  class="input-small" placeholder="Password"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><em>Here is a <a href="http://jsfiddle.net/3e3rZ/" rel="nofollow">jsfiddle</a> for the valid behaviour.</em></p>
  
  <h2>Html</h2>
  
  <pre><code>&lt;form class="navbar-form"&gt;
      &lt;input type="text" class="input-small" placeholder="Email"&gt;
      &lt;input type="password" class="input-small" placeholder="Password"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Any thoughts on how to fix this? I am guessing I am missing something with bootstrap.
  ​</p>