7-5
欄寬隨著內容長度改變
- 使用 col-{breakpoint}-auto, 欄寬隨著內容長度改變，但內容較少時，容器會靠左
- 在row 加上 .justify-content-center ：水平置中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>col-{breakpoint}-auto</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<Style>
html,
body {
height: 100%;
}
.container {
border: 0px solid;
background-color: #e5e5e5;
min-height: 100%;
height: 100%
}
.col {
background-color: #ff0000;
height: 50px;
margin-top: 10px
}
.col-lg-2 {
background-color: #ff9900;
height: 50px;
margin-top: 10px
}
.col-lg-auto {
background-color: #ffffcc;
height: 50px;
margin-top: 10px
}
</style>
<body>
<div class="container">
<div class="row ">
<div class="col-lg-2">
左欄<br>
col-lg-2
</div>
<div class="col-lg-auto">
空山不見人<br>
col-lg-auto
</div>
<div class="col-lg-2">
右欄<br>
col-lg-2
</div>
</div>
<div class="row">
<div class="col">
左欄<br>
col
</div>
<div class="col-lg-auto">
空山不見人，但聞人語響。返景入深林，復照青苔上。<br>
col-lg-auto
</div>
<div class="col-lg-2">
右欄<br>
col-lg-2
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
7-4 Grid System