Geek asks and answers

Twitter Bootstrap with the addition of MVC between inputs

I use MVC and bootstrap to create a website and basically experimented with it and found the following:

While creating an inline form in the navigation bar, I noticed that the spacing between input elements is incorrect. I think I realized that this is caused by the markup created by the Razor engine, there are no spaces between the elements that they appear next to each other, without spaces. But I'm not sure how to solve it.

Below is jsfiddle for invalid behavior.

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>

Below is jsfiddle for correct behavior.

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 guess I have something missing with bootstrap.

+3
source
2

, , , .

@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>
}

.

+3

, , . , inline-block 4px .

, , , .

0

More articles:


All Articles