Bootstrap如何使响应网格分两步降级？

Question

我以前使用yaml css框架,其中元素在两个或更多步骤中降级,现在我必须以某种方式将其转换为基于bootxrap 2.3x的wp-theme.但响应性似乎只是一步到位,所以我真的不知道如何使它适合我.请帮我.

我有一个jsfiddle为此.

更新我刚更新到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-->