집 >웹 프론트엔드 >부트스트랩 튜토리얼 >Bootstrap 그리드 레이아웃에서 열을 래핑하는 방법에 대한 간략한 설명
Bootstrap 그리드 레이아웃에서 열을 래핑하는 방법에 대한 간략한 설명
- 青灯夜游앞으로
- 2021-11-17 19:13:137899검색
이 글은 bootstrap그리드 레이아웃의 줄 바꿈 문제를 이해하고 그리드 열이 어떻게 래핑되는지 알아보는 데 도움이 될 것입니다.
1. 그리드 레이아웃의 줄 바꿈에 대해 자주 묻는 질문
이전 섹션에서는 그리드 줄 바꿈에 대한 관련 지식을 어느 정도 소개했으며, 이번 강의에서는 관련 데모도 제공합니다. 줄바꿈에 대한 지식이 부족하면 웹 페이지 레이아웃에 큰 편차가 생기거나 설명할 수 없는 문제가 발생하기 쉽기 때문에, 줄바꿈에 대해 다시 자세히 이야기해 보겠습니다. 그리고 아까 얘기했을 땐 4열을 2행으로 나누는 등 대부분의 행이 완벽하게 맞지만, 3열이나 5열을 2행으로 나누는 등 행이 꽉 차 있지 않은 경우에 문제가 자주 발생합니다. . 마지막 행이 표시되는 방식에 주의를 기울이지 않으면 잘못되기 쉽습니다. [관련 권장 사항: "bootstrap Tutorial"]
Grid Line Wraps에 대해 자주 묻는 질문:
줄이 끊어져야 할 부분에는 줄 바꿈이 없습니다.
줄이 끊어지면 안 되는 부분에는 줄 바꿈이 없습니다
마지막 자동 줄 바꿈의 줄 조판 Confusion
2.열 줄 바꿈
2.1 .row-cols-* 사용법.row-cols-*用法
我们前面使用的row都是一个单纯的<div class="row">，事实上，对于row也可以进一步的使用<code>row-cols-*类快速设置最能呈现内容和布局的列数。普通的.col-*类应用于各个列（例如.col-md-4），而row-cols-*类是作为快捷方式在父.row上设置的。
.row-cols-*的星号可以写数字，数字代表一行要显示的列数，而不是宽度，这一点不要和普通的.col-*
row는 간단한 < ;div class="row">, 실제로 행의 경우 row-cols-* 클래스를 사용하여 표시할 수 있는 열 수를 빠르게 설정할 수 있습니다. 최고의 현재 콘텐츠와 레이아웃. 일반 .col-* 클래스는 개별 열(예: .col-md-4)에 적용되는 반면 row-cols-* 클래스는 상위 열의 바로가기로 사용됩니다. .row가 설정되었습니다.
.row-cols-*의 별표는 숫자로 작성할 수 있습니다. 숫자는 행에 표시할 열의 수를 의미하며 일반적인 것과 혼동해서는 안됩니다. .col-* code>가 혼동됩니다. .row-cols-auto를 사용하여 너비를 조정할 수도 있지만 이 경우 레이아웃이 제어 범위를 벗어날 가능성이 높습니다. <p></p> 코드를 사용하여 다음을 시연해 보겠습니다. <p><pre class="brush:html;toolbar:false;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><img src="https://img.php.cn/upload/image/421/334/212/1637147091163077.png" title="1637147091163077.png" alt="Bootstrap 그리드 레이아웃에서 열을 래핑하는 방법에 대한 간략한 설명">표시된 결과는 다음과 같습니다</p>
<p></p>
<h2 data-id="heading-3">
<code>.row-cols-*-*row-cols-3의 3을 2, 4, 5, 6 등으로 변경하여 효과를 확인해 보세요.
또 다른 놀라운 점을 발견하셨나요? 열 너비 col을 설정하면 평균적으로 한 행에 5개의 열을 표시할 수 없지만 row-cols-5를 설정하면 표시할 수 있습니다.
2.2
Usage 열 너비 설정과 마찬가지로 행 수 설정도 반응형 디자인을 지원합니다. 다음 코드는 row-cols-xs-1과 같은 클래스가 없다는 점에 유의하세요. row-cols -1을 사용하세요. 즉, 기본값은 쓰지 않는 것입니다. 이는 가장 작은 화면입니다.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>网格行列演示</title>
</head>
<body>
<div>
<div class="row row-cols-md-1 row-cols-md-2 row-cols-lg-3">
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
<div>
Bootstrap是什么？
</div>
</div>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
반응형 효과 애니메이션
2.3 매우 넓은 줄 바꿈행의 각 셀에 너비 값이 설정된 경우 행의 나머지 너비가 다음 셀을 수용할 수 없는 경우 자동으로 줄 바꿈됩니다. 이 부분은 이미 "Section 4 Bootstrap 웹 페이지 레이아웃 그리드 시스템"에서 자세히 설명하고 시연했기 때문에 여기서는 자세히 설명하지 않겠습니다. 이해되지 않는 부분이 있으면 섹션 4.2.4를 참조하세요. 2.4 강제 줄 바꿈부트스트랩에서는 각 열의 너비를 변경하지 않고 강제 줄 바꿈을 수행하는 것이 일반적으로 여러 행을 추가하는 방식으로 수행됩니다. 그러나 이 경우 행의 특정 열 뒤에 강제 줄 바꿈이 필요한 경우가 있습니다. , 약간의 트릭을 사용할 수 있습니다. 마지막으로 줄 바꿈이 필요한 경우 너비가 100%이고 높이가 0인 div를 추가하여 강제 줄 바꿈을 수행합니다. <div class="container"> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <!-- 此处强制换行 --> <div class="w-100"></div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div> </div>
원래 한 줄로 표시되던 것이 두 줄로 표시됩니다.
부트스트랩에 대한 자세한 내용을 보려면 🎜부트스트랩 기본 튜토리얼🎜을 방문하세요! ! 🎜
위 내용은 Bootstrap 그리드 레이아웃에서 열을 래핑하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：부트스트랩에 내장된 플러그인은 무엇입니까?다음 기사：부트스트랩에 내장된 플러그인은 무엇입니까?