html - Bootstrap 如何让响应式网格分两步降级？

Question

我以前使用 yaml css 框架，其中元素在两个或更多步骤中退化，现在我必须以某种方式将其转换为基于 bootstrap 2.3x 的 wp 主题。但是响应能力似乎只有一步，所以我真的不知道如何让它为我工作。请帮助我。

I've got a jsfiddle for this.

更新 我刚刚更新到 3.x bootstrap。我希望这将使解决方案成为可能...

代码:

<div class="row-fluid" style="padding:1em;margin-top:3em;">
    <div class="span12">
        <div class="row-fluid">
            <div class="span8">
                <div class="row-fluid">
                    <div class="span4"> <a class='' href='#'>
                    <img class='media-object medium' src='http://dummyimage.com/160x250/ccc/222.png' id=''>
                </a>

                    </div>
                    <div class="span8">
                        <table class="table table-hover">
                            <tr>
                                <td><span class="pull-right">author</span>
                                </td>
                                <td><span class="pull-left text-bright"><a>Some Author</a></span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Title</span>
                                </td>
                                <td><span class="pull-left text-bright">The Earth within</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Serial</span>
                                </td>
                                <td><span class="pull-left text-bright">Keine / Einzelroman</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Publisher</span>
                                </td>
                                <td><span class="pull-left text-bright">Bookmonsters </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Published in</span>
                                </td>
                                <td><span class="pull-left text-bright">2011-01-24</span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="pull-right">Info</span>
                                </td>
                                <td><span class="pull-left text-bright">asdfasfd</span>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="span4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
        </div>
    </div>
</div>

Answer 1

如果您已升级到 Bootstrap 3，则不需要自定义 CSS。您可以只使用 md 和 xs 类...

http://www.bootply.com/117713

<div class="row" style="padding:1em;margin-top:3em;">
    <div class="col-md-12">
        <div class="row">
                <div class="col-md-2 col-xs-4">
                   <a class="" href="#">
                    <img class="media-object medium img-responsive" src="http://dummyimage.com/160x250/ccc/222.png" id="">
                   </a>
                </div>
                <div class="col-md-6 col-xs-8">
                        <table class="table table-hover">
                            <tbody>
                                <tr>
                                    <td><span class="pull-right">author</span>

                                    </td>
                                    <td><span class="pull-left text-bright"><a>Some Author</a></span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Title</span>

                                    </td>
                                    <td><span class="pull-left text-bright">The Earth within</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Serial</span>

                                    </td>
                                    <td><span class="pull-left text-bright">Keine / Einzelroman</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Publisher</span>

                                    </td>
                                    <td><span class="pull-left text-bright">Bookmonsters </span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Published in</span>

                                    </td>
                                    <td><span class="pull-left text-bright">2011-01-24</span>

                                    </td>
                                </tr>
                                <tr>
                                    <td><span class="pull-right">Info</span>

                                    </td>
                                    <td><span class="pull-left text-bright">asdfasfd</span>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                </div>
                <div class="col-md-4 col-xs-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip.
                </div>
          </div><!--/row-->
     </div><!--/col-12-->
</div><!--/row-->