3

私はMVCとブートストラップを使用してWebサイトを作成していますが、ほとんどの場合、MVCとブートストラップを試していて、次のことがわかりました。

ナビゲーションバーでインラインフォームを作成しているときに、入力要素間の間隔が正しくないことに気付きました。これは、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>

これを修正する方法について何か考えはありますか？ブートストラップで何かが足りないと思います。</ p>

4

2 に答える 2

3

私が言えることから、入力要素がフォーム要素の直接の子である場合にのみ、その動作が得られます。

試す

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

入力要素の間に空白を入れる必要があります。

于 2012-04-16T23:21:09.357 に答える
0

テキストボックスには左または右の余白がないため、入力要素の間に空白がない場合は、テキストボックスを隣り合わせにする必要があります。空白がある場合、インラインブロック要素は要素間に4pxのマージンをレンダリングします。

これを回避するには、要素をスペースなしで同じ行に配置するか、両方の要素を左側にフロートさせます。

于 2012-04-16T22:20:35.327 に答える