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>

更新於:12-Jun-2020

132 次瀏覽

開啟您的 職業

透過完成本課程獲得認證

開始
廣告
© . All rights reserved.