Bootstrap网格布局 [英] Bootstrap grid-layout

问题描述

我是引导网格系统的新手，所以当我尝试创建（高级？）gridview时，我陷入困境：

所以我的问题是我不知道如何组织块的行，因为一些块必须有不同的高度，例如块5的高度。应该和块3和2一样大。

这甚至可能吗？也应该有块之间的一些空间，所以背景图片应该填补这些空间。

请帮我。

你需要做的是将div 2,3和4放在他们自己的容器div（class .col-md-3）中，5和6放在另一个容器div中容器div（与类.col-md-3）。让div 1拥有.col-md-6类。

编辑：您应该使用媒体查询将其设置为桌面的固定高度，然后使用灵活的高度当它移动时。

  @media屏幕和（最大宽度：980px）{＃div2 {height：500px; （或其他）}} 
  

I am newbie with bootstrap gridline system so I got stucked when I tried to create that (advanced?) gridview:

So my problem is that I do not know how to organize blocks in rows, because some blocks must have difeerent height, for example height of block 5. should have the same size as blocks 3. and 2. together.

Is that even possible? Also there should be some space between blocks, so background image should fill those space.

Please help me out.

解决方案

What you'll want to do is place divs 2, 3, and 4 in their own container div (with the class .col-md-3) and 5 and 6 in another container div (with the class .col-md-3). Make div 1 have the .col-md-6 class.

Edit: You should use a media query to make it a fixed height in the desktop, then a flexible height when it's mobile.

@media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}

这篇关于Bootstrap网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！