twitter-bootstrap 带有 HTML5 部分和旁边的 Bootstrap 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36161615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Grid with HTML5 Sections and Aside
提问by Takuhii
I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
我正在使用Bootstrap 4 网格系统，并希望在屏幕的右侧浮动一旁。
Currently my MAINcontent is wrapped in col-xl-3, I want the ASIDEto also use col-xl-3, but I want it to run the height of the page, not just the height of the row it is in, as it is currently pushing the height of the row out...
目前我的主要内容被包裹在col-xl-3 中，我希望ASIDE也使用col-xl-3，但我希望它运行页面的高度，而不仅仅是它所在行的高度，如它目前正在将行的高度推出......
As you can see from the image, my aside is pushing the top row higher than the bottom...
正如你从图片中看到的，我的一边是把顶行推得比底行高……
All I have done code wise is this;
我在代码方面所做的一切就是这样；
section.body article, section.body aside { float: left; clear: both; }
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by AKosarek
I used "col-sm" but the principle is still the same. It's all about the nesting.
我使用了“col-sm”，但原理还是一样的。这都是关于嵌套的。
View in full page to see columns.
查看整页以查看列。
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container" role="main">
<div class="row">
<div class="col-sm-8">
<div class="row">
<div class="col-sm-4">1</div>
<div class="col-sm-4">2</div>
<div class="col-sm-4">3</div>
<div class="col-sm-4">4</div>
<div class="col-sm-4">5</div>
<div class="col-sm-4">6</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
<div class="row">Nav</div>
</div>
</div>
</div>
</body>
</html>