가운데 5칸을 전체 가로폭에 맞게 조절하려며 어떻게 해야하나요?
본문
총12칸 ::
3칸 차지 / 5칸 차지 / 3칸 차지
가운데 5칸을 전체 가로폭(12칸)에 맞게 조절하려며 어떻게 해야하나요?
==============
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavender;">.col-sm-1</div>
<div class="col-sm-1" style="background-color:lavenderblush;">.col-sm-1</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
</body>
</html>
답변 4
각각의 해상도에서 어떻게 보여줄지에 따라서 그루핑을 다르게 해야되는데 sm을 사용하신걸로봐서는 모바일은 대응안하는건가요?
대략적인 레이아웃을 표로 그려주시면 답변하는데 도움이 됩니다...
아래와 같습니다.
답변감사합니다.