부트 스트랩이있는 레이아웃 격자

부트 스트랩 프레임 워크로 레이아웃 격자를 구성하는 데 도움이 필요합니다. 부트 스트랩이있는 레이아웃 격자

위

내가 그 화면 크기/다양한 장치에 적응 만드는 데 필요한 레이아웃입니다. (또한 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 구조를 어딘가에 추가 할 필요가 있다고 생각합니다.

누군가 올바른 방향으로 나를 안내 할 수 있습니까? 도움을 주셔서 감사합니다.

출처

2017-09-18 User051593

확인이 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 부분은

출처

2017-09-19 05:59:25

이 많은 감사, 감사 한 행에 있어야합니다. – User051593

부트 스트랩이있는 레이아웃 격자

답변

관련 문제