带有HTML5部分并位于一边的Bootstrap网格 [英] Bootstrap Grid with HTML5 Sections and Aside
问题描述
我正在使用 Bootstrap 4网格系统 ，并且想在屏幕的右侧向下浮动.
I am using the Bootstrap 4 grid system, and want to float an aside down the right hand side of the screen.
当前，我的主要内容包装在 col-xl-3 中，我希望 ASIDE 也使用 col-xl-3 ，但我希望它运行页面的高度，而不仅仅是行所在的高度，因为它当前正在将行的高度推出...
Currently my MAIN content is wrapped in col-xl-3, I want the ASIDE to 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...
从图片中可以看到，我的一面是将顶行推得比底行高...
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; }
任何帮助将不胜感激.
推荐答案
我使用了"col-sm"，但原理仍然相同.都是关于嵌套的.
I used "col-sm" but the principle is still the same. It's all about the nesting.
全页查看以查看列.
<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>这篇关于带有HTML5部分并位于一边的Bootstrap网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
