Bootstrap 행에서 g-5를 초과하는 열 간격에 대한 기본 CSS 스타일을 사용자 정의하는 방법
P粉644981029
2023-08-16 11:02:55
<p>부트스트랩을 사용하여 간단한 랜딩 페이지를 구축하고 있습니다. 행의 열 간격을 늘려야 합니다. 사용자 정의 Sass 간격 믹스인을 사용하여 간격을 늘릴 수 있다는 것을 알고 있지만 제가 만들고 있는 웹 사이트에는 여러 섹션이 포함되어 있으므로 간단하게 유지하고 빌드 프로세스가 필요하지 않습니다. 열 사이에 32px 또는 40px 간격을 제공하는 g-5 클래스 이름을 행에 사용했습니다. CSS를 사용하여 더 늘리는 방법. </p>
<pre class="brush:php;toolbar:false;"><div class="container mt-5 pt-5">
<div class="row text-light g-5 fs-1">
<div class="col-lg-4">
<div class="bg-dark p-5">열</div>
</div>
<div class="col-lg-4">
<div class="bg-dark p-5">열</div>
</div>
<div class="col-lg-4">
<div class="bg-dark p-5">열</div>
</div>
</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
CSS를 사용하여 행의 열 간격을 늘리려면 Grid-column-gap 속성을 사용할 수 있습니다. 이 속성은 그리드 레이아웃에서 열 사이의 간격을 지정합니다.