Bootstrap 網格堆疊到具有流動容器的水平網格

要建立堆疊到具有流動容器的水平網格的網格，使用 container-fluid 類。

此類允許容器跨越螢幕的整個寬度。

可以嘗試執行以下程式碼建立具有流動容器的網格 −

示例

實際演示

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "container-fluid">
         <h1>Grid</h1>
         <div class = "row">
            <div class = "col-sm-6" style = "background-color:blue; color: white">
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text.
            </div>
            <div class = "col-sm-6" style = "background-color:red; color: white">
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text. This is demo text. This is demo text.
               This is demo text.
            </div>
         </div>
      </div>
   </body>
</html>

更新於: 2020-06-12

132 次瀏覽

開啟 職業生涯

透過完成課程獲得認證

開始
廣告