Question

我遇到了bootstrap响应式设计的问题。它隐藏了一些我不愿意隐藏的照片和iframe。我尝试设置.col-xs col-sm和所有内容，也尝试了.visible.sm，但它仍然没有显示任何内容。不知道我是否可以覆盖这种隐藏风格并告诉bootstrap我可以想象这些内容是否很重要？

编辑：This是我正在谈论的代码段。当然，我正在使用bootsrap。我要求一个通用的解决方案，如果有一个类覆盖bootstrap的隐藏。很抱歉，如果代码没有太多整理，但是我使用带有jade作为视图引擎的MEAN堆栈，所以我只是将其复制出浏览器并整理它。

.container
            .row
                .well(ng-repeat="page in pages" ng-if="page!=undefined")
                    .row
                        .col-md-1
                            img(ng-src="{{page.profileImage}}" src="")
                        .col-md-9.pull-left
                            h5{{page.from.name}} - 
                                span(ng-show="page.type=='link'") shared link
                                span(ng-show="page.embedLink || page.type=='video'") added video
                                span(ng-show="page.type=='photo'") added picture
                            .row.content(ng-show="page.type=='link'", style="margin-top:20px;")
                                .col-md-6
                                    div.image-link-container
                                        a(href="{{page.link}}" target="_blank")
                                            img(ng-src="{{page.picture}}" src="")
                                .col-md-6
                                    p.description
                                        | {{page.name}}
                                    p 
                                        a(href="{{page.caption}}" target="_blank") {{page.caption}}
                                    p.message {{page.message}}
                            .row.content(ng-show="page.type=='photo'" style="margin-top:20px;")
                                .col-md-6
                                    div.image-link-container(ng-hide="page.embedLink")
                                        img(ng-src="{{page.postPhoto}}" src="")
                                .col-md-6
                                    p.message.description
                                        |{{page.message}}
                                        br
                                        | {{page.caption}}
                            .row.content(ng-show="page.embedLink || page.type=='video'", style="margin-top:20px;")
                                iframe(ng-src="{{trustSrc(page.embedLink)}}", src="", style="widht:560px;height:315px", frameborder="0", allowfullscreen, target="_top", type="application/x-shockwave-flash")

                        .col-md-2
                            .well
                                .row.fb-action-row.text-center(ng-click="like(page)")
                                    img(ng-src="https://googledrive.com/host/0B_EenlQcPPQvd0ZhX053UTFpX00/Add-Facebook-Like-Button-in-Magento.jpg" width="30" height="30")
                                    span.fb-action Likes 
                                        span {{page.likes.data.length || 0}}
                                .row.fb-action-row.text-center(ng-click="commentWindow(page)")
                                    img(ng-src="https://googledrive.com/host/0B_EenlQcPPQvd0ZhX053UTFpX00/comment.png" width="30" height="30")
                                    span.fb-action Comment 
                                        span {{page.comments.data.length || 0}}
                                .row.fb-action-row.text-center(ng-click="share(page)")
                                    img(ng-src="https://googledrive.com/host/0B_EenlQcPPQvd0ZhX053UTFpX00/share.jpg" width="30" height="30")
                                    span.fb-action Shares 
                                        span {{page.shares.count || 0}}

Answer 1

我如何看待它，在你的代码中添加bootstrap之后：它不是你的内容div（div.col-md-9.pull-left）隐藏，但是它是一个社交媒体（div.col-md-2）将所有空间放在内容之上。

对我来说有什么用：尝试在较小的屏幕（col-xs-2）上定义它的（div.col-md-2）行为或拉动它（添加拉斗或左拉）。

希望它有所帮助;）

编辑：供将来使用 - 用于简单引导代码共享的Jsfiddle：http://www.bootply.com/qZvpz3Jkha

Bootstrap隐藏内容在小屏幕上

1 个答案: