3

Twitter Bootstrap を使い始めたばかりで (初めてなので、まだ完全には把握できていません!)、特定の視覚要素を含む 2 列のフォームを作成しようとしています。

フォームの完全な幅は約です。ビューポートの幅の 80% と、この範囲内には、ラベルと関連するテキスト ボックスの 2 つの列 (ほぼ等間隔) があります。一部のテキスト ボックスでは、テキスト ボックスの右側に小さなアイコンを貼り付ける必要があり、ユーザーがブラウザ ウィンドウのサイズを変更したときに、そのアイコンがテキスト ボックスの右側に固定されたままになるようにする必要があります (少なくともこのままにするため)。解像度 1024x768 まで)。また、「レスポンシブデザイン」でこれらすべてを達成しようとしています。

より高い解像度で見栄えを良くすることはできますが、ユーザーがブラウザウィンドウのサイズを変更すると、テキストボックスの「内側」にアイコンが表示されるため、何か間違っていることがわかります。

この最初の画像は、フォームがすべてのサイズで (大まかに) どのように見えるかを示しています。

フォーム上のビジュアル要素の多かれ少なかれ正しい配置

ただし、ブラウザー ウィンドウのサイズを変更するときは、次のようにします。 ブラウザ ウィンドウのサイズを変更すると、封筒のアイコンがテキスト ボックス内で移動する

この小さな封筒のアイコンを常にテキスト ボックスの右側に固定したままにしておいてください。残念ながら、ブラウザ ウィンドウをさらに縮小すると、次の行に移動します。 ブラウザ ウィンドウのサイズをさらに小さくすると、封筒アイコンが次の行に移動します

このフォームの多くを生成するために ASP.NET MVC を使用しているため@Html.TextBoxFor、マークアップ内で多くの呼び出しが行われていますが、関連するレンダリングされたマークアップの一部を強調する JSFiddle を投稿しました。問題：

http://jsfiddle.net/qYTSY/1/

私はこれで完全に間違ったアプローチをとったと確信していますが、私はデザイナーではないので、現在のマークアップを微調整して目的を達成するのに苦労しています. 誰でも助けてもらえますか？

4

2 に答える 2

1

jsfiddle でクラスを追加しました：

.controls-row-with-icon {
    width: 28em;
}

...そして明らかに2つのdivを次のように変更しました:

<div class="controls controls-row controls-row-with-icon">

これにより、メールアイコンが右側に「固定」されます。それが他の何かを「壊す」かどうかはわかりませんか？

注: jsfiddle では、2 つの列が互いに重なっているように見えましたが、製品バージョンでそれが行われるかどうかはわかりませんか? ビューポートが小さい場合、rh 列を lh 列の「下に」入れることができませんでしたが、本番コードでは問題なく動作していると思いますか?

ロブ

編集

コメントを見る

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.container {
    margin-top: 10px;

}

.row{
    /*min-width: 62em;*/ /* add this is viewport should be fixed */
}

.controls-row{
    width: 30em;
    background: #ccc;
}

.row-fluid .span5{

    margin-left: 0;
    margin-right: 2em;
    width: 30em;
}

.row-fluid .offset1{
    margin-left:0;
    margin-right: 0;
}

</p>

于 2012-10-23T10:42:46.800 に答える
0

まあ、いじくり回した後、解決策を見つけたと思います！

更新された JSFiddle は次のとおりです。

http://jsfiddle.net/qYTSY/32/

答えが強調表示されます（最初の列は無視してください-個別に修正しました。）

LiverpoolsNumber9とSherbrowの両方に、私を解決に導いてくれたことに感謝します。

私の解決策の核心は、アイコンを追加する必要がある入力要素の周りの要素のspan3クラスを削除することでした（これをそのままにしておくと、あらゆる種類の奇妙で素晴らしい問題が発生しました）が、入力要素とアイコン要素もラップしますエクストラでおよびクラスを使用して、アイコンが入力ボックスの右側に配置および固定されるようにします。spanspandivinput-appendadd-on

したがって、このマークアップ:

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
    <span class="offset4"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
</div>

これになりました：

<div class="controls controls-row">
    <span class="span3"><label for="Contact_EMail">EMail</label></span>
    <div class="input-append">
        <span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
        <span class="add-on"><a href="mailto:someone@example.com" id="emaillink"><i class="icon-envelope" id="emailicon"></i></a></span>
    </div>
</div>

私は告白しなければならない解決策を見つけましたが、CSS/Styling/Twitter Bootstrap に関しては、私はまだこのように感じています!

于 2012-10-24T08:34:24.267 に答える