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

文本框上没有左边距或右边距，因此当输入元素之间没有空格时，它们应该紧挨着。如果存在空格，则内联块元素将在元素之间呈现4px的边距。

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

Twitter Bootstrap在输入之间使用MVC填充

剃刀

HTML

HTML

2 个答案: