我需要一些帮助来使用 Bootstrap 框架构建布局网格。
以上是我需要创建的布局以适应各种屏幕尺寸/设备。
到目前为止，这是我的代码:(还有 JS Fiddle 存档:https://jsfiddle.net/emerson05/5zvkdnkq/)
<html lang="en">
<head>
<!-- Set character encoding first -->
<meta charset="utf-8" />
<!-- Viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<!-- Suitable title -->
<title>Bootstrap Grid Layout</title>
<!-- Link to the Bootstrap CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<style>
div[class^="container"] {
border: 5px solid red;
}
.row {
border: 5px solid orange;
}
div[class^="col"] {
border: 5px solid limegreen;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>A</h1>
</header>
<main>
<div class="row">
<div class="col-md-5">
<h2>B</h2>
<p>Pellentesque gravida luctus pharetra. In felis neque, feugiat at lacus eget, faucibus iaculis velit. Nullam tristique,
justo eget blandit finibus, dui justo aliquam ligula, sit amet iaculis quam lectus sed ex.</p>
</div>
<!-- .col-5 -->
<div class="col-md-7">
<div class="row">
<div class="col-6 col-md-12 col-lg-6">
<h2>C</h2>
<p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
vitae iaculis ut, viverra eget neque.</p>
</div>
<!-- .col-6 col-md-12 copl-lg-6 -->
</div>
<!-- .row-->
<div class="row">
<div class="col-6 col-md-12 col-lg-6">
<h2>D</h2>
<p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
ut mattis lacus convallis vel.</p>
</div>
<!-- .col-6 col-md-12 col-lg-6 -->
</div>
<!-- .row -->
<div class="row">
<div class="col-md-12">
<h2>E</h2>
<p>Praesent accumsan, odio quis varius suscipit, nulla ante tincidunt nisl, non interdum quam eros nec nibh. Nulla eget
dapibus metus, ac ultricies purus. Vestibulum et tristique felis.</p>
</div>
<!-- .col-md-12 -->
</div>
<!-- .row -->
</div>
<!-- .col-7 -->
</div>
<!-- .row-->
</main>
<footer>
<p>F</p>
</footer>
</div>
<!-- .container -->
<!-- Supporting JavaScript libraries -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
</body>
</html>
我的布局已经基本完成。如您所见，我在布局的 C、D、E 部分遇到了一些问题。我认为问题是需要在某处添加另一个 .col 结构
有人能给我指出正确的方向吗，谢谢你的帮助。
最佳答案
检查这个https://jsfiddle.net/5zvkdnkq/5/
<div class="row">
<div class="col-6 col-md-12">
<h2>C</h2>
<p>Sed ac mi ut ante mollis tristique. In sed nisl quis est sollicitudin varius non et velit. Sed turpis nunc, varius
vitae iaculis ut, viverra eget neque.</p>
</div>
<div class="col-6 col-md-12">
<h2>D</h2>
<p>Morbi vel ipsum id dolor rutrum lacinia. Praesent ullamcorper vulputate libero a vestibulum. Cras mollis mollis magna,
ut mattis lacus convallis vel.</p>
</div>
</div>
C 和 D 部分应在行
关于html - 使用 Bootstrap 布局网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46288017/