Question

使用bootstrap的网格，是否可以构建像这样的响应？

这是我到目前为止所做的尝试。

<div class="row">
    <div class="panel panel-default profile_header">
        <div class="panel-body">
            <% for user in @users %>
                <div class="col-xs-5 col-md-3">
                    <%= image_tag(user.avatar.url(:medium), :class => "avatar_profile") %>
                </div>
                <div class="col-xs-7 col-md-9">
                    <h2 class="profile_name"><%= user.name %></h2>
                    <div class="row">
                        <div class="col-xs-12 col-md-12">
                            <h2 class="profile_bio"><%= user.bio%></h2>
                        </div>
                    </div>
                </div>
            <% end %>
        </div>
    </div>
</div>

但对于手机，我希望紫色列弹出并显示在下面。内容现在太嘎吱嘎吱，将它打破到自己的全宽盒子会好得多。虽然可以吗？

Answer 1

您没有询问单元格应该如何查找sm视口（从768px到991px）md或类似于xs应该是什么样的？

以下是md和xs视口的摘要

.purple {
    background: purple;
}
.orange {
    background: orange;
}
.green{
    background: green;
}
div[class^="col-"]{
    height: 100px;
}

@media screen and (min-width: 992px) {
    div.orange {
        height: 200px !important;
    }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 col-xs-5 orange">
        </div>
        <div class="col-md-9 col-xs-7 green">
        </div>
        <div class="col-md-9 col-xs-12 purple">
        </div>
    </div>
</div>

Bootstrap行＆amp; col响应

1 个答案: