Bootstrap 3 및 Bootstrap 4에서 다중 행 열을 어떻게 생성합니까?-CSS 튜토리얼-php.cn

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

Susan Sarandon

풀어 주다： 2024-11-30 22:43:20

원래의

188명이 탐색했습니다.

How do I create multi-row columns in Bootstrap 3 and Bootstrap 4?

다중 행 부트스트랩 열

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

해결책:

부트스트랩 3:

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

부트스트랩 4:

외부 .container 또는 .container-fluid div를 생성하여 콘텐츠 너비를 정의합니다.
외부 .row div를 추가합니다.
외부 행 내부에 div 열(
)을 추가하여 두 행에 걸쳐 있습니다. 행.
내부 열 div(
)에서 .w-100 클래스를 사용하여 두 행 열 내에 또 다른 내부 .row를 생성하여 전체 너비에 걸쳐 있도록 합니다.
필요에 따라 내부 행 내에 하위 열 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!