开发者社区> 问答> 正文

从推叠到水平排列的实例代码是什么?

从推叠到水平排列的实例代码是什么?

展开
收起
去校区学技术 2022-03-28 19:14:21 312 0
1 条回答
写回答
取消 提交回答
  • 创建一个文html件

    写入文件

    
    ! <head>
    
    <meta charset="UTF-8">
    
    <title></title>
    
    <link href= "bootstrap. min.css" rel="stylesheet">
    
    </head>
    
    3 <body>
    
    <div class= "container">
    
    <div class="row">
    
    <div class="col-md- 1">. col-md-1</div>
    
    <div class="col-md- 1">. col-md-1</div>
    
    <div class="col-md-1">.col-md-1</div>
    
    <div class="coL-md- 1">.col-md-1</div>
    
    <div class="col-md-1">.col-md-1</div>
    
    <div class="col-md-1>.col-md-1</div>
    
    <div class="col-md-1">.col-md-1</div>
    
    <div class="col-md- 1">. col-md-1</div>
    
    <div class="coL-md- 1">. col-md-1</div>
    
    <div class="col-md-1"> .col-md-1</div>
    
    <div class="coL-md- 1">. col-md-1</div>
    
    <div class="col-md- 1">. col-md-1</div>
    
    </div>
    
    </div>
    
    < /body>
    
    < /html>
    
    添加样式
    
    <style>
    
    . row{
    
    margin- bottom: 20px;
    
    }
    
    .row . row{
    
    margin-top: 10px;
    
    margin- bottom: 0;
    
    }
    
    [class*="col-"]{
    
    padding-top: 15px;
    
    padding-bottom: 15px;
    
    background-color: #eeeeee;
    
    border: 1px solid #dddddd;
    
    继续添加背景颜色
    
    background-color: rgba(86,61,124, .15);
    
    border :
    
    1px
    
    solid rgba(86,61,124, .2);
    
    (只能最多存放十二个)
    
    2022-03-28 19:15:04
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载