Bootstrap 3 및 Bootstrap 4에서 다중 행 열을 어떻게 생성합니까?

다중 행 부트스트랩 열

문제:
특정 열이 여러 개에 걸쳐 있는 부트스트랩 그리드 생성 행, 특히 상자가 프로그래밍 방식으로 생성되는 경우 시퀀스.

해결책:

부트스트랩 3:

1. 외부 .row div를 생성하여 전체를 정의합니다. 콘텐츠 너비.
2. 바깥쪽 행 안에 div 열을 추가합니다. (
   )를 사용하여 두 행에 걸쳐 있습니다.
3. 두 행 열 내에 또 다른 내부 .row를 만듭니다.
4. 내부 행 내에 하위 열 div(
   )를 추가합니다( s) 필요에 따라 남은 공간을 채웁니다.

부트스트랩 4:

1. 외부 .container 또는 .container-fluid div를 생성하여 콘텐츠 너비를 정의합니다.
2. 외부 .row div를 추가합니다.
3. 외부 행 내부에 div 열(
   )을 추가하여 두 행에 걸쳐 있습니다. 행.
4. 내부 열 div(
   )에서 .w-100 클래스를 사용하여 두 행 열 내에 또 다른 내부 .row를 생성하여 전체 너비에 걸쳐 있도록 합니다.
5. 필요에 따라 내부 행 내에 하위 열 div(
   )를 추가하여 나머지 부분을 채웁니다. space.

예제 코드:

부트스트랩 3:

<div class="row">
  <div class="col-md-4">
    <div class="well">1
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <div class="well">2</div>
      </div>
      <div class="col-md-6">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="well">4</div>
      </div>
      <div class="col-md-6">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div><p><strong>부트스트랩 4: </strong></p>
<pre class="brush:php;toolbar:false"><div class="container">
  <div class="row">
    <div class="col">
      <div class="well">1
        <br>
        <br>
        <br>
        <br>
        <br>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">2</div>
      </div>
      <div class="col">
        <div class="well">3</div>
      </div>
    </div>
    <div class="row w-100">
      <div class="col">
        <div class="well">4</div>
      </div>
      <div class="col">
        <div class="well">5</div>
      </div>
    </div>
  </div>
</div>

위 내용은 Bootstrap 3 및 Bootstrap 4에서 다중 행 열을 어떻게 생성합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!