現在、フォームを作成する Twitter Bootstrap を使用しています。
ファイル入力のスタイリングには、input-append を使用しています。
<div class="input-append">
<input type="text" name="product[picture]-input" id="picture" readonly="readonly" placeholder="Produktbild (optional)">
<button class="btn" id="picture-reset" type="button"><i class="icon-remove"></i></button>
<button class="btn" id="picture-select" type="button">...</button>
</div>
しかし、スタイリングが他の入力に適合しません。私はレスポンシブデザインを使用しており、相対的なサイズ変更を試みました
class="input-medium"
またはグリッドサイジング
class="span4"
しかし、input-append が最適化されていないようです。ここで見ることができる完全なコード:
そして、ここに画面サイズが異なるいくつかの画面があり、それぞれのサイズでは収まりません:
https://drive.google.com/folderview?id=0ByywF8ZXCU9kbTdUZ1N6bkxodGs&usp=sharing
何か案は?