這是我的代碼：
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.row {
width: 100%;
height: 80%;
margin: 0px;
padding: 0px;
}
body {
background: #EFEFEF;
}
.container-fluid {
width: 100%;
height: 80%;
margin: 0;
padding: 0px;
border: 3px solid;
border-color: #848484
}
.navbar-brand {
position: absolute;
margin-top: auto;
margin-left: 20px
}
#post-container {
margin-left: auto;
margin-right: auto;
border: 3px solid;
border-color: #FF0000
}<div class="container-fluid">
<nav class="navbar"> <img class="navbar-brand" src="images/Ventr_Logo.svg" alt="Ventr Logo" width="100"> </nav>
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
<div class="col-lg-4 col-md-6 col-sm-8" id="post-container">
</div>
<div class="col-lg-4 col-md-3 col-sm-2" style="background: #4E4E4E"></div>
</div>帶有紅色邊框的淺灰色列是主列。這是當瀏覽器接近平板電腦大小時的樣子，它正確地保持了我想要的 6:3 的比例。其中 6 是主列的大小，3 是側列的大小。這是影像
現在問題來了： 這就是它在手機上的樣子 。問題是，不是像我想要的那樣在一條線上看到 3 列保持 8:2 的比例。相反，它分為 3 列。
我該如何解決這個問題？順便說一句，我希望列的大小取決于螢屏的大小。
uj5u.com熱心網友回復：
在 bootstrap 中，“col-sm”從 768 像素開始。要定位小螢屏，您可以使用“col-xs”（576 像素或更多）或“col”，用于更小的螢屏。
只需將 "col-sm-2" 替換為 "col-2" ：
<div class="row" >
<div class="col-lg-4 col-md-3 col-2" style="background: #4E4E4E"></div>
<div class="col-lg-4 col-md-6 col-8" id="post-container">
</div>
<div class="col-lg-4 col-md-3 col-2" style="background: #4E4E4E"></div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431645.html
下一篇：CSS如何制作手持卡片的效果