我的 Bootstrap 4 響應式列布局不起作用

Question

因此，我使用 Bootstrap 4 制作了一個非常簡單的響應式網站布局，因此根據代碼，當它進入平板電腦模式時，列數應該變為 4，即當視口寬度為 768px 時，我的可以顯示 4 列的 770px，但當它變為769px 它切換到智能手機模式並占據整個寬度並相互堆疊。

 <div class="row"> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;"> col </div> </div>

Answer 1

與 Bootstrap 3 不同，Bootstrap 4 有一些不同的網格系統。 這里sm從 <768px 開始起作用。 xs斷點現在只是col 。 在這里，改寫了一下。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> <div class="col-lg-2 col-sm-3 col-12" style="background-color:red;"> col </div> </div> </div>

Answer 2

我希望我明白你在問什么。 這應該可以防止元素在視口變得更小之前進入全屏

<div class="row">
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
  <div class="col-lg-2 col-sm-3" style="background-color:red;">
    col
  </div>
</div>

只是提醒一下斷點，大小（sm/lg）指定規則適用的頁面大小。 該規則從最小的尺寸開始，適用於它的尺寸和比它大的沒有規則的尺寸。 默認列大小為 12，因此無需指定。

Answer 3

試試這個，它可能會解決你的問題：

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-2 col-3" style="background-color:red;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:green;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:pink;">
             col
        </div>
        <div class="col-lg-2 col-3" style="background-color:yellow;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:white;">
             col
        </div><div class="col-lg-2 col-3" style="background-color:orange;">
             col
        </div>
    </div>
</div>

此代碼將在平板電腦模式和手機模式下僅保留 4 列，但如果您也想在 pc 視圖中保留 4 列，則只需從每個 class 中刪除 col-lg-2

Answer 4

如果您也想在移動設備上看到相同的視圖，則您正在使用col-lg-2 col-md-3 col-sm-12類，只需使用col ，例如col-3 。 如果你想要最小設備的全寬使用col-xs-12這並不重要，默認是col-xs-12你可以改變它col-xs-6之類的東西。