帶引導的布局網格

Question

我需要一些使用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結構

有人可以在這里指出正確的方向，謝謝您的幫助。

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部分應在一行中

帶引導的布局網格

問題描述

1 個解決方案

解決方案1
1 已采納 2017-09-19 05:59:25

帶引導的布局網格

問題描述

1 個解決方案

解決方案1 1 已采納 2017-09-19 05:59:25

解決方案1
1 已采納 2017-09-19 05:59:25