0

以下のコードでは、列の数が親スパン（10）と同じであるにもかかわらず、スパン＃2がスパン＃1の下に表示されます。これは、ネストされた行（class="row well"）の境界線が原因です。

内容を押し下げることなく、ネストされた行に境界線を適用するエレガントな方法はありますか？

ネストされたスパンの位置に応じて上/左/下/右の境界線を適用して適用するbox-sizing: border-boxと役立つと思いますが、ブラウザの幅を狭くすると問題が発生し、これも醜い解決策になります。

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">
    <div class="row well">
      <div class="span5" style="background-color: #aca">
        #1
      </div>
      <div class="span5" style="background-color: #aac">
        #2
      </div>
    </div>
  </div>
</div>
4

1 に答える 1

6

井戸を列に並べないでください、それをそれ自身の容器にしてください。

<div class="row">
  <div class="span2"> left menu </div>
  <div class="span10">     
    <div class="well">
      <div class="row-fluid">
        <div class="span6" style="background-color: #aca">
          #1
        </div>
        <div class="span6" style="background-color: #aac">
          #2
        </div>
      </div>
    </div>
  </div>
</div>

「row」クラスは厳密な幅を使用し、「row-fluid」クラスはパーセンテージを使用し、「span6」クラスが存在する場合でも並べて保持するため、class="row"をclass="row-fluid"に置き換えました。親に追加のパディングと境界線が追加されました。

于 2012-11-27T21:39:02.460 に答える