{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ゆ 、 Hurt° 的问题《Multiple rows inside a row with Bootstrap 4》','https://www.manongdao.com/q-362840.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to create a full width page using Bootstrap. I have a setup similar to this:
<body>
<div class="container-fluid">
<div class="row">
The first row goes here
</div>
<div class="row">
The second row goes here
</div>
<div class="row">
The third row goes here
</div>
</div>
</body>
If I wanted to create a row inside a row, how would I do that? This is what I am trying to achieve:
<body>
<div class="container-fluid">
<div class="row">
<div class="row text-center">
<h1>Some title</h1>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
Grid perhaps
</div>
<div class="col-md-4">
More grid
</div>
<div class="col-md-2"></div>
</div>
</div>
</div>
</body>
So basically I want to put the title on one row and some grids on another row. The tricky part here is, I want to place some columns that are 4 columns wide in the middle, and then have "2 columns padding" on the left and right.
My question may sound like others, but is unique because of the padding. How do I make this layout properly?
Bootstrap has a smart (but delicate) gutters system providing "natural" (
margins +paddings) for content on all devices 1.This system is based on two simple assumptions:
.rows 2That's why, if you want to place a
.rowinside another.row(to further divide one of your cols), you'd have to use this markup:The above doesn't make much sense by itself (you could just use the markup of the child row and you'd get the same result). But it's useful when you want to offset (or limit) an entire area of a layout, like this:
See this fiddle for a live example.
1 To get rid of Bootstrap's gutters (in v4), one would need to apply
no-guttersclass on.row.2 This is a "general principle", not a "strict rule". Other elements are allowed (and even recommended) as direct children of
.rows (such as column breaks). At the other end, other elements extend from.rows (such as.form-rows), thus inheriting the gutters system and being valid column parents.A
.rowshould not be the immediate child of another.row. From the Bootstrap docs:I don't understand why you think you need a row in a row, and what's wrong with just using your layout w/o the nested
row. Do you realize thatcol-12is the width of a full row?http://www.codeply.com/go/jfrWn4QDf1
Bootstrap 4, the same rule applies: