我正在嘗試制作一個在使用手機時折疊的側邊欄。但是在前三個影像之后，下一行的影像從側邊欄下方而不是旁邊開始。
頂部還可以，但是當向下滾動到其他影像時，它們不會將自己排列在側邊欄旁邊。表明：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="row mt-5">
<div class="col-3 vertical-test">
<nav class="navbar navbar-expand-lg navbar-light">
<!-- <div > -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-column p-2">
<li class="nav-item">
<a class="navbar-brand active" href="#">DIABLO DAILY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">NEW ITEMS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BRANDS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CURATED PIECES</a>
</li>
</ul>
</div>
<!-- </div> -->
</nav>
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid shadow" src="https://via.placeholder.com/120">
</div>
<!-- for the next line -->
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<div class="col-3">
<img class="img-fluid" src="https://via.placeholder.com/120">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds 3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>uj5u.com熱心網友回復：
干得好...
正如上面的評論所建議的那樣，您應該將側邊欄放在一列中，并將所有其余內容放在旁邊的列中。我稍微重新排列了您的代碼（例如，更改col-3為col-4），以便輸出看起來像您發布的那樣，但同時您的問題也得到了解決。
請參閱下面的片段。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row mt-5'>
<div class='col-3 vertical-test'>
<nav class='navbar navbar-expand-lg navbar-light'>
<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#navbarNav' aria-controls='navbarNav' aria-expanded='false' aria-label='Toggle navigation'>
<span class='navbar-toggler-icon'></span>
</button>
<div class='collapse navbar-collapse' id='navbarNav'>
<ul class='navbar-nav flex-column p-2'>
<li class='nav-item'>
<a class='navbar-brand active' href='#'>DIABLO DAILY</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>NEW ITEMS</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>BRANDS</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
<li class='nav-item'>
<a class='nav-link' href='#'>CURATED PIECES</a>
</li>
</ul>
</div>
</nav>
</div>
<div class='col-9'>
<div class='row mb-5'>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid shadow' src='https://via.placeholder.com/120'>
</div>
</div>
<div class='row'>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
<div class='col-4'>
<img class='img-fluid' src='https://via.placeholder.com/120'>
</div>
</div>
</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320819.html
標籤：html css 推特引导 bootstrap-5