Question

我需要一些帮助，使用bootstrap框架构建布局网格。

以上是我需要创建的适应各种屏幕尺寸/设备的布局。

到目前为止，这是我的代码:(还有JS小提琴档案：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结构

有人可以指出我在正确的方向，谢谢你的帮助。

Answer 1

选中此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部分应该在一个行

中

布局网格与Bootstrap

1 个答案: