Question

我有一个带有四个网格项的网格布局。在桌面宽度，网格将是这样的......

using (HttpClient client = new HttpClient())
{
    using (HttpResponseMessage response = await client.GetAsync(page))
    {
        using (HttpContent content = response.Content)
        {
            string contentString = await content.ReadAsStringAsync();
var myParsedObject = (MyObject)(new JavaScriptSerializer()).Deserialize(contentString ,typeof(MyObject));
        }

    }
}

如果浏览器的大小调整为~1023px或更低，那么我希望布局看起来像这样......

| 20% |     |     |       |
|     |     | 20% |       |
|     | 20% |     |  40%  |

这一切都很容易，但这里是警告，第一个例子中网格项的高度需要是均匀的，因此使用display：table-cell或min-height属性;但是，当我们点击断点时，100％网格项应该成为自动高度网格项并且不保留显示：table-cell高度。

如果不使用任何类型的JavaScript，这甚至可以实现吗？

Answer 1

你想要这样的想法吗？

尝试使用不同尺寸的自己的代码，代码段是＆＃39; XS＆＃39; 屏幕。

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:red;">
    Div1
</div>
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:blue;">
    Div2
</div>    
<div class="col-xs-4 col-sm-4 col-md-2" style="background-color:yellow;">
    Div3
</div>
<div class="col-xs-12 col-sm-12 col-md-6" style="background-color:pink;">
    Div4
</div>

＆＃13;

响应式网格布局问题

1 个答案: