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 次浏览

开启 职业生涯

通过完成课程获得认证

开始
广告