3

これを行うとテキストボックスの幅を変更できることを認識しています

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox", style="width:400px" })

しかし、私はよりきちんとしたアプローチを望みます。

これを新しいcssファイルに追加してみました

.k-textbox .small {
    width: 50px !important;
}
.k-textbox .medium {
    width: 120px !important;
}
.k-textbox .large {
    width: 320px !important;
}

そして私のcshtmlファイルで

@Html.TextBoxFor(m => m.LoginId, new { @class = "k-textbox medium" })

しかし、これはうまくいきません。テキストボックスのサイズはそのまま

私は何が欠けていますか？

4

3 に答える 3

9

CSS の定義が間違っています。

.k-textbox .mediumclass="k-textbox"は、この DOM 要素内に DOM 要素があり、その中に別の要素が含まれていることを意味しますclass="medium"。CSS ルールのスペースを取り除くだけです。

.k-textbox.small {
    width: 50px !important;
}
.k-textbox.medium {
    width: 120px !important;
}
.k-textbox.large {
    width: 320px !important;
}
于 2013-03-03T09:07:27.317 に答える
2

これは本当に遅いですが、このトピックの重要な更新だと思います...

Bootstrap を使用する MVC 4/5 Web アプリを使用している場合、幅を指定すると、bootstrap の「レスポンシブ」機能が無効になるため、幅を指定したくありません。

TextBox にクラスを追加して幅を 100% に設定し、必要な Bootstrap 幅の列の div に配置します。

たとえば、ワイドフルの私のクラスは次のとおりです。

.wide-full {
    width: 100%;
}

ここで、カミソリ フォームの Address モデルに City フィールドがあるとします...

<div class="row">
    @Html.LabelFor(model => model.City, new { @class = "control-label col-sm-2 col-md-2 col-lg-2" })
   <div class="col-sm-4 col-md-4 col-lg-4">
        @Html.TextBoxFor(model => model.City, new { @class = "text-box single-line wide-full" })
        @Html.ValidationMessageFor(model => model.City)
    </div>
</div>

これで、表示デバイスが変更されると、テキスト ボックスはレスポンシブ デザインに反応し、新しい必要な幅を処理します。

于 2014-03-14T14:05:37.133 に答える