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 “well” 等高 div 修复。但是，当最小化时；虽然 span3 在 span9 下浮动 - span9 内的 div 的内容溢出 span9 并进入 span3 - 而不是被包含

非常感谢任何帮助！

4

1 回答 1

0

我已经用.span4类将你的三个 div 包装在 div 中.row-fluid，现在工作正常。请参阅有关脚手架（流体嵌套）的官方 Twitter Bootstrap 文档。

这是代码：

<div class="container">


<!-- **************   CAROUSEL   ****************** -->
      <div class="row-fluid">
        <div class="span9 black well">
            <div class="row-fluid">
                <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 cursus 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>
            <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 &raquo;</a></p>
       </div>

      </div>

    </div>

我已将您的 jQuery 代码放在 jsfiddle 内的正确位置。另外，用.load()函数替换.ready()函数。现在检查它ht​​tp://jsfiddle.net/M48jH/9/embedded/result/

注意：如果您只是调整浏览器窗口的大小，您将再次看到问题。如果在调整大小后刷新，问题就消失了。我可以用.resize()函数来解决这个问题。但无论如何，当您调整窗口大小时，您将拥有.span3与 div 高度相同的.span9div。

于 2013-04-01T23:38:58.880 回答