0

Bootstrap の初心者なので、私の無知を許してください。特定のレイアウトの応答性に問題があります。

これがフルスクリーンフィドルですhttp://jsfiddle.net/subdes/M48jH/5/embedded/result/

<div class="row-fluid">


     <div class="span9 black well">

        <div class="span4 grey  no-margin">
           <h1>A</h1>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac    cursus commodo, tortor mauris c
           <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
        </div>

        <div class="span4 grey  no-margin">
           <h1>B</h1>
           Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac   curs    us commodo, tortor mauris   eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris         Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris   eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
           <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
        </div>

        <div class="span4 grey  no-margin">
           <h1>C</h1>
           Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
           <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
        </div>

        <div class="row-fluid">
           <div class="span12  green no-margin">
              <h1>D</h1>
           </div>
        </div>

    </div>


    <div class="span3 competition well black ">
      <h1>E</h1>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details</a></p>
    </div>

</div>

左側 (span9) と右側 (span3) のスパンに jquery の「よく」等しい高さの div 修正を実装しました。ただし、最小化すると。span3 は span9 の下にフロートしますが、span9 内の div の内容は、含まれているのではなく、span9 を超えて span3 に流出します。

どんな助けでも大歓迎です！

4

1 に答える 1