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

Question

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

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-->

Answer 2

您必须覆盖bootstrap's默认样式才能使您的示例正常工作。使用以下CSS作为起点：

@media (max-width: 767px) {
    .override [class*=span] {
        float: left;
    }

    .override .span4 {
        width: 30%;        
    }

    .override .span8 {
        width: 70%;        
    }
}

Updated fiddle

Answer 3

This 您想要实现的目标是什么？假设您正在使用bootstrap 3

<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
  <img src="http://placehold.it/200x300" class="pull-right">  
</div>
  <div class="col-md-9 col-sm-9 col-xs-3">
    <div class="row">
      <div class="col-md-12">
         <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-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> 
  </div>
</div>