ブートストラップフォームの入力サイズは尊重されません

例： / user / loginで、ユーザー名とパスワードの両方の入力フィールドにHTML属性size = “60”が含まれます。

Bartikでは、フィールドの幅は固定されています。

Bootstrapでは、フィールドは画面幅全体に拡大されます。

要求された動作： Bootstrapを/ user / login、およびWebサイトの他のすべてのページでsize属性に準拠させます。影響を受けるすべてのページのリストを生成することはできません。ページが多数あり、時間の経過とともに変化します。

BootstrapSCSSの何かが入力フィールドの幅を台無しにしているようです。その何かを削除するか、オーバーライドしたいと思います。しかし、私はまだそれを行う方法を理解することができませんでした。

これまでに見つけたもの： Drupal.orgにはすでにの問題があり、モジュールメンテナーのmarkcarverは

それらが「引き伸ばされた」全幅である理由は、両方がフォーム制御クラスを持っているためです。これはBootstrapの設計の一部であり、私はその箱から出して戦うつもりはありません。サブテーマで、適切と思われるこのフォームを変更する方法はいくつかあります。

一部は機能しますが、100％正しくはありません：タイプtextのフォームコントロールクラスを使用して、すべての入力に新しい幅を設定するCSSを作成することは可能です。ただし、幅は15emなどの固定値に設定されます。入力ごとに異なる元の幅に戻したいのですが。

なぜいけないのか'これをCSSで修正するだけですか？
@leymannx明確にしました。"編集2 。はい、CSSで修正する予定ですが、すべてのフィールドをカバーする単一の変更を探しています。その方法を知っている場合は、投稿/コメントしてください。
反対票を投じた人が理由を説明してくれれば、将来何かを学び、より良い質問をすることができるかもしれません
'反対票を投じますが、実際には非常に幅広い質問をし、'自分で行ったことを強調しないために起こったと思いますこれまでのところ、この問題を自分で修正する必要があります。それとは別に、CSSで修正してその方法を尋ねることができる場合、この質問もトピックから外れます。 'サブテーマの作成方法については説明しません。また、堅牢なCSSの作成方法についても説明しません。'それをカバーするチュートリアルはすでに何百もあります。がんばろう！ 🙂
@leymannxありがとう。実際、私は非常に具体的な質問をしていますが、私はそれをひどく説明したと思います。 'もう一度編集してみます。しかし、混乱を引き起こしているので、質問を削除する必要があるかもしれません。

回答

標準的な修正方法これは、Bootstrapベースのサブテーマでcssを使用するためです。ユーザー名とパスワードのログインフィールドの場合：

#edit-name, #edit-pass { width: 15em; }

NB私はすべてをカバーするソリューションを探しています特別な場合としてのユーザーログインだけでなく、入力の形式。

このメソッド（css）は、オーバーライドするすべてのテキスト入力フィールドに使用できます。ブートストラップのデフォルトの動作。明らかに、オーバーライドするフィールドに適切なcss-selectorを使用する必要があります。

お時間を割いていただきありがとうございます。 "編集2 "をご覧ください-ケースバイケースで影響を受ける可能性のあるすべてのフィールドを特定する必要がないようにしたいと考えています。
テキストタイプのフォームコントロールクラスによる入力とターゲット設定は実用的でも保守不可能でもありますか？
@kevin申し訳ありませんが、質問がわかりません。
IDを使用する代わりに、タイプ' text 'のそのクラスの入力をターゲットにすることができます。
@Kevinありがとう、はい、それは私が望んでいたものにもっと似ています。しかし、私はまだ15emのような固定幅で立ち往生しているようです。 #sizeで指定された実際の幅を維持したいと思います。 Bootstrapが幅を上書きするために行ったすべてのことを"元に戻し、Bartikで発生するのとまったく同じ幅を取得したいと思います。

専門家からの回答を期待していましたが、それでも歓迎します。私の代わりに別の答えを受け入れるように設定します。

これまでの私の最善の試みです。ログインページと検索ブロックで機能するようです。それでも、「自分が持っていないシステムと戦っている」ような気がします。完全に理解している。

.form-control, .input-group .form-control, .input-group-btn { width: auto; }