0

私は小さなプロジェクトに取り組んでおり、デザインがあまり得意ではないため、TwitterBootstrapを使用することにしました。

input-appendと要素をクラスとinput-prepend組み合わせて同じサイズにしようとすると、問題に直面します。.spanX

現在ここに問題があります

私がこれをするとき： 

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

すべて順調

付加された要素にを追加するspanXと、完全に機能します。

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

しかしspanX、追加された要素に要素を配置しようとすると、それは機能しなくなり、レイアウトが壊れます

<div class="row-fluid">
    <div class="span12 input-append input-prepend">
        <span class="span2 add-on">
            <i class="icon-user"></i>
        </span>
        <span class="span8 uneditable-input text-right">0</span>
        <span class="span2 add-on">
            <i class="icon-tint"></i>
        </span>
    </div>
</div>

それで、誰かがすでに同じ問題を抱えていますか？サイトを調べましたが、この問題に関連するものは見つかりませんでした。

コード内の要素がインラインではないという事実が問題を引き起こしていることを時々知っていspanますが、私はそれを経験していませんでした。すべてがインラインであっても問題は解決しません。

読んでくれてありがとう。ヘルプやアドバイスを歓迎します=）

4

1 に答える 1

2

すべてのspan*クラスにはfloat:left;宣言が付属しています-それが問題の原因です。クラスを作成し、必要に応じて幅を定義する方がよい場合があります。そうすれば、スパンクラスの使用に伴う厄介なフロートを取得できなくなります。

ここで更新された例：

http://jsfiddle.net/dusthaines/77XEk/3/

于 2013-02-21T21:21:20.913 に答える