5 
<div class="row">
    <div class="span8">
        <div class="well well-large">
            <h3>Place an Order</h3>

            <div class="row">
                <div class="span3">Bid Price</div>
                <div class="span2">Execute</div>
                <div class="span3">Ask Price</div>
            </div>
        </div>

それが私の構造です。ビッド価格、約定価格、アスク価格はすべて同じ行に収まる必要があります。彼らは井戸にいるので、そうではないように見えます。これは既知の動作であり、とにかくその周りにありますか?

4

1 に答える 1

9

ネストされた行が 1 行に収まらないのはなぜですか?

well問題は、要素のパディングとボーダーです。span8class が normal 内にある場合、幅は 620px に固定されますrow。

最初の状況

要素には 24pxのwell-largeパディング (緑色の部分) と 1px の境界線があるため、ネストされた行は青色の部分の内側になります。しかし、青い部分は 620px 幅ではなく、570px 幅です。

ウェルエレメント内の幅

spanネストされた行内の要素も固定幅です。span2幅は 140px でspan3、幅は 220px です。

スパンの幅

要素とその余白のすべての幅を追加するspanと (220px + 140px + 220px + (20px * 2) = 620px)、行の合計幅はwell要素 (570px) より大きくなるため、最後の要素がプッシュされます。次の行へ。

それを解決する方法は？

最初の試み

私の最初の簡単な解決策は、そのような要素にクラスを配置することです（span8JSFiddle ）：well

<div class="row">
   <div class="span8 well well-large">
      <h3>Place an Order</h3>

      <div class="row">
         <div class="span3">Bid Price</div>
         <div class="span2">Execute</div>
         <div class="span3">Ask Price</div>
      </div>
   </div>
</div>

これにより、前の問題は解決されますが、1 つ問題が追加されます。パディングがspan8要素内にあるため、ウェル要素の幅が 670px であるため、メイン グリッドが壊れています (620px の幅には、パディングとウェルの境界から 50px を追加する必要があります)。

2 番目の状況

しかし、今では青い部分の幅が 620px になっているため、ネストされた行のすべての要素が青い部分に完全に収まります。しかし、前にも言ったように、グリッドは壊れています。たとえば、 の後に要素を追加するとspan4、ネストされた要素で以前に起こっていたように、 が次の行にプッシュされます。span8span4

したがって、このレイアウト（JSFiddle）では：

<div class="row">
    <div class="span8 well well-large">
         <!-- Some ramdom text -->
    </div>
    <div class="span4">
         <!-- Some ramdom text -->
    </div>
</div>

次の結果が得られます。

最初の解決策の問題

最終的解決

内に 3 つの列wellが必要な場合は、別のグリッド システムが必要です。row-fluidの代わりに使用できるソリューションの 1 つですrow。ではrow-fluid、span要素の幅は固定幅ではなくパーセンテージです。

このレイアウト ( JSFiddle ) では:

<div class="row">
    <div class="span8">
        <div class="well well-large">
            <h3>Place an Order</h3>

            <div class="row-fluid">
                <div class="span4">Bid Price</div>
                <div class="span4">Execute</div>
                <div class="span4">Ask Price</div>
            </div>
        </div>
    </div>
</div>

あなたが本当に望んでいたものに似たものを達成することができます。3/8、2/8、3/8 の正確な比率が必要な場合 (スパンを使用した初期セットアップのように)、CSS を使用して 3 列のレイアウトを作成する必要があります。ブートストラップspan要素だけを使用してそれを行うことはできません。

于 2013-04-02T23:21:56.817 に答える