bootstrap container row col

最新推荐文章于 2026-04-27 02:30:48 发布

原创最新推荐文章于 2026-04-27 02:30:48 发布 · 2.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

frontend 专栏收录该内容

94 篇文章

订阅专栏

本文介绍了一个使用Bootstrap框架实现响应式布局的例子，展示了不同屏幕尺寸下布局的变化，包括使用col-xs、col-sm和col-md类创建网格系统。

https://getbootstrap.com/docs/3.3/css/
http://wiki.jikexueyuan.com/project/bootstrap4/layout/grid/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-8" style="background-color: red;">.col-xs-12 .col-sm-6 .col-md-8</div>
        <div class="col-xs-6 col-md-4" style="background-color: green">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        <!-- Optional: clear the XS cols if their content doesn't match in height -->
        <div class="clearfix visible-xs-block"></div>
        <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>
</div>
</div>
</body>

</html>

在电脑大浏览器中显示
在这里插入图片描述