Twitter Bootstrap 与输入之间的 MVC 填充

Question

我正在使用 MVC 和 bootstrap 来创建一个网站，并且大部分时间都在尝试它并发现以下内容：

在导航栏中创建内联表单时，我注意到输入元素之间的间距不正确。我想我发现这是由 Razor 引擎生成的标记引起的，它们彼此相邻呈现的元素之间没有空白，没有任何间距。但是不知道怎么解决。

这是无效行为的jsfiddle。

剃须刀

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

这里是 jsfiddle 的有效行为。

HTML

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

关于如何解决这个问题的任何想法？我猜我在引导程序中遗漏了一些东西。 ​

Answer 1

据我所知，只有当输入元素是表单元素的直接子元素时，才会出现这种行为。

试试

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

你应该在输入元素之间得到空白。

Answer 2

文本框上没有左边距或右边距，因此当输入元素之间没有空白时，它们应该彼此相邻。如果有空格，inline-block 元素将在元素之间呈现 4px 的边距。

要解决这个问题，您可以将元素放在同一行且没有空格，或者将两个元素浮动到左侧。