<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Layout</title>
<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
<!-- <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3" style="background-color: aqua;">1</div>
<div class="col-sm-6 col-md-3" style="background-color: antiquewhite;">2</div>
<div class="col-sm-6 col-md-3" style="background-color: burlywood;">3</div>
<div class="col-sm-6 col-md-3" style="background-color: forestgreen;">4</div>
</div>
</div>
</body>
</html>
我在 devtool 中使用切換設備工具列切換到較小的設備，如 Moto G4，但頁面似乎與我在計算機原始解析度下看到的相同。本來以為螢屏小的時候能看到兩排排，結果一直是四排。有人能告訴我為什么嗎？
uj5u.com熱心網友回復：
添加視口（例如<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>）應該會有所幫助：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Layout</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- <script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3" style="background-color: aqua;">1</div>
<div class="col-sm-6 col-md-3" style="background-color: antiquewhite;">2</div>
<div class="col-sm-6 col-md-3" style="background-color: burlywood;">3</div>
<div class="col-sm-6 col-md-3" style="background-color: forestgreen;">4</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329266.html