bootstrap 网格布局

用户5760343

发布于 2022-01-10 08:25:11

8040

发布于 2022-01-10 08:25:11

文章被收录于专栏：sktjsktj

总的为12

image.png

div:container row col-sm-3

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 实例 - 嵌套列</title>

</head>

<body>

<h1>Hello, world!</h1>

  <div class="col-sm-3" style="background-color: #dedef8;box-shadow: 
     inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     <h4>第一列</h4>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>

  <div class="col-sm-9" style="background-color: #dedef8;box-shadow: 
     inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
     <h4>第二列 - 分为四个盒子</h4>
     <div class="row">
        <div class="col-sm-6" style="background-color: #B18904;
           box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
           <p>Consectetur art party Tonx culpa semiotics. Pinterest 
              assumenda minim organic quis.
           </p>
        </div>
        <div class="col-sm-6" style="background-color: #B18904;
           box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
           <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
              ullamco laboris nisi ut aliquip ex ea commodo consequat.
           </p>
        </div>
     </div>

     <div class="row">
        <div class="col-sm-6" style="background-color: #B18904;
           box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
           <p>quis nostrud exercitation ullamco laboris nisi ut 
              aliquip ex ea commodo consequat.
           </p>
        </div>   
        <div class="col-md-6" style="background-color: #B18904;
           box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
              sed do eiusmod tempor incididunt ut labore et dolore magna 
              aliqua. Ut enim ad minim.</p>
        </div>
     </div>

  </div>

</div>

</body> </html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.05.19 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https