多个网格

Bootstrap Multiple grid

本文关键字：网格      更新时间：2023-09-26

我在bootstrap网格上工作。我想让设计像pic1.jpg。但我没有得到我期望的设计。Pic2.jpg是当前的场景。我在下面给出了我的代码。

pic1.jpg: -! http://s16.postimg.org/xjrulxcmd/pic1.png

pic2.jpg: -! http://s30.postimg.org/tu3h09ubl/pic2.png

所以，Category3一定是category2、category4和category5的和。此外，我试图画一个圆圈在左侧的类别1，但它不工作。圆圈在第一类之后。它也应该响应，这是必须的。

My code:- 

<!-- Boostrap Help -->
<html lang="en">
<head>
  <title>Example </title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    p {
      padding: 50px;
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      background: #f2f2f2;
    }
    
    #circle {
      background: #f00;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p>Category 1</p>
        <div id="circle"></div>
      </div>
      <div class="col-md-8">
        <p>Category 2</p>
      </div>
      <div class="col-md-4">
        <p>Category 3</p>
      </div>
      <div class="col-md-8">
        <p>Category 4</p>
      </div>
      <div class="col-md-8">
        <p>Category 5</p>
      </div>
    </div>
  </div>
</body>
</html>

这就是我对你上面的提供所做的

CSS 

 p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
        height:100%;
}
#circle {
    background: #f00;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position:absolute;
    left:10%;
    top:30%;
}
.abc {
        position:relative;
}
.row-eq-height { /*-- This class is the trick make two column equal height --*/
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

相关文章：