3

HTMLが自動生成されるフレームワークでWebサイトを構築しています。Twitter Bootstrap 3 では、そのような入力に幅を適切に適用するために、各入力にクラス「form-control」を追加する必要があります。問題は、その css クラスをコードから追加するには、多くの場所でフレームワークを変更する必要があることです。

回避策はありますか？おそらく、フォーム内のすべてのラベルを検索する javascript/jquery で、ラベルごとに関連する入力が見つかり、最後に css クラスが追加されますか? しかし、私は本当にそれを行う方法がわかりません。

助けてくれてありがとう。

4

4 に答える 4

0

私はこの特定の問題に直面したことはありませんが、一般的に、Bootstrap 3 を使用する場合、.less ファイルなどに独自の変更を加えて .less ファイルを自分で作成します。

/* Import the Bootstrap 3 .less files */
@import url('../../Bootstrap/less/bootstrap.less');

/* Now implement my own styling below */

.less を使用すると、次のように、フレームワークの関連部分から関連するスタイルを取得できる場合があります (.mydiv はコンテナー要素です)。

.mydiv {
    input,
    select,
    textarea {
        .form-control;
    }
}

これにより、.form-control スタイルが取り込まれ、.mydiv 内の入力、選択、およびテキストエリア要素に適用されます。私はこれを試したことはありませんが、試してみる価値はあります!

于 2013-11-08T17:07:45.587 に答える
0

cssを編集して再コンパイルすることもできますが、すべての入力またはテキスト領域にそのスタイルforms.lessを適用したくないため、注意が必要です。.form-control

適用したいフォームの ID がある場合、これが役立ちます。

$('#yourFormId input, #yourFormId textarea, #yourFormId input, #yourFormId select').addClass('form-control');

フォームにあるすべてのフォーム フィールド タイプを追加していることを確認する必要がありますが、上記の行はおそらくそれらのほとんどをカバーします。フレームワークによっては、自動生成されたフォームにクラス名を含めるためのある種の mixin または関数がある場合があります。

于 2013-11-08T16:48:01.033 に答える
0

Less解決策は、コンパイルされたライブラリの代わりにBootstrap のクラスを使用し、何らかの形でコードに必要なタグを追加することです。

この記事を見てください。

于 2013-11-08T16:48:36.827 に答える
0

これはブートストラップの「ハッキーな」実装であるため、悪い考えです。適切な html 構造が必要なクラスが必要なだけではありません。これら 2 つの変更を実装する魔法の JavaScript を作成しようとする時間は、フレームワークの変更に費やされたほうがよいでしょう。

于 2013-11-08T16:29:49.320 に答える