Question

因为我是Bootstrap的新手并且在一个需要嵌套列布局的测试站点上工作。我的代码在

之下

            <html class="no-js" lang="en-US">
                <body>
                <div class="container">
                <div id="page" class="row">

            <header id="branding" role="banner" class="span12">
                <nav id="access" role="navigation">
                Menu 
                </nav>
                </header>

            <section id="primary" class="span9">
            <div id="content" role="main">
                <h1 class="entry-title">Some Title</h1> 
                <div class="entry-meta">
                Some Info
            </div><!-- .entry-meta -->

            <div class="row meta-info">

            <div class="post-image span3">
                <ul class="thumbnails">
                image
                </ul>
            </div><!-- .post-image -->

            <div class="post-intro span4">
                some intro text
            </div><!-- .post-intro -->

            <div class="post-desc span2">
                some more info
            </div><!-- .post-desc-->

            </div><!-- meta info-->


            </section>
            </div><!-- #content -->

            </div><!-- row -->
            </div><!-- container -->
            </body>
            </html>

我在大型显示器上看到每个人都认为没问题，但是在1152x864的屏幕上，span2上的post-desc会崩溃并出现在span4的底部。

我需要的是这应该保持响应，并应根据浏览器重新调整大小。

我的代码是否正确？或者还有其他方法可以达到这个目的吗？

请帮忙。

此致 SAQ

Answer 1

 <div class="row meta-info">

应该

 <div class="row-fluid meta-info">

假设您的容器上有最大宽度值，它应该可以工作。

Bootstrap嵌套布局 - 列分解

1 个答案: