logo标签列表

Bootstrap如何使响应式网格在两个步骤中退化？

htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-3
7
我之前使用过yaml css框架，其中的元素会在两个或更多步骤中逐渐降级，现在我必须将其翻译成基于bootstrap 2.3x的wp主题。但是响应性似乎只有一个步骤，所以我真的不知道如何让它对我起作用。请帮帮我。 这是我的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>

enter image description here

你能升级到Bootstrap 3吗？ - Able Alias
不好意思，不行——这会破坏网页。这样做有什么不同吗？ - Hexodus
@able-alias 我升级到了Bootstrap 3 - 现在该怎么办？ - Hexodus
3个回答
6

如果您已经升级到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-->
我个人认为，你的答案现在使用BS3是最好的。+1 - Morpheus
非常感谢，这是完美的解决方案！ - Hexodus
2

为使您的示例生效，您需要覆盖bootstrap的默认样式。使用以下CSS作为起点：

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

    .override .span4 {
        width: 30%;        
    }

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

更新的代码片段

这对我不起作用。但非常感谢你的尝试帮助我=加一。但正如你上面评论的那样，Skelly得到了最好的答案。 - Hexodus
0

您是想要实现这个吗？假设您正在使用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>
抱歉，但这并不符合我的要求。这只展示了静态布局，而我想要从3列退化到2列。 - Hexodus
使用col-sm类适配平板电脑，使用col-xs类适配较小的分辨率。我假设您已经知道这些类是用来做什么的。 - Lokesh Suthar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接