Question

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 - 而不是被包含

任何帮助都非常感谢！

Answer 1

我已将.span4类的三个div包含在div .row-fluid类中，现在工作正常。请参阅官方Twitter Bootstrap documentation about scaffolding (fluid nesting)。

这是代码：

<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()函数。立即查看http://jsfiddle.net/M48jH/9/embedded/result/

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

.well等高度divs不正确清除

1 个答案: