需要使用 Bootstrap 创建网格[已关闭]

nfg76nw0 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(2)|浏览(104)

已关闭，此问题需要更focused。它目前不接受回答。
**想改善这个问题吗？**更新问题，使其仅通过editing this post关注一个问题。

7天前关闭
Improve this question的
我正在寻找一个引导主任谁可以帮助我建立一个简单的网格...我太笨了，不能这样做，甚至不能很好地描述它的ChatGPT。我希望这并不需要太多的努力：
在页面的顶部是一个横幅超过全宽的图片（已经完成和工作）。高度80 px
下面是具有以下条件的“网格”：
3列，每列4列（不需要响应）其余的高度（完整-横幅高度）被分成8个相等的“段”。第1列有两个“项目”（将是卡片），一个具有4段高度，第二个也具有4段高度。声音一个也跨越到列2（所以它有一个宽度8）在此之上，也有一个4高度项目是可用的。所以设计应该是这样的：
https://ibb.co/89vWfPF的
第3列有3个高度如下的项目：第一个项目高度2第二个项目高度1第三个项目高度5
也许有人可以很容易地把这个。谢啦，谢啦
我试着处理列和行，但没能成功

twitter-bootstrap

来源：https://stackoverflow.com/questions/76749694/need-to-create-a-grid-with-bootstrap

2条答案

按热度按时间

dhxwm5r41#

如果您为.container设置了一个合适的最小高度，您可以通过使用带有内置.h-*utility classes的 Bootstrap .row s和.col-* s并定义另外两个您自己的高度来实现这一点。.h-one-eighth和.h-five-eighths。
下面是一个完全响应的示例，说明您的实际需求：

#my-grid {
  height: 100vh;
}

#my-grid [class*="col-"] {
  background-color: rgba(0, 255, 0, .1);
  border: 1px solid black;
  overflow: hidden;
}

.h-one-eighth {
  height: 12.5% !important;
}

.h-five-eighths {
  height: 62.5% !important;
}

个字符

赞(0）回复(0）举报 2023-08-01

cbwuti442#

我希望这对你有帮助。此代码将创建一个具有指定列和项高度的响应网格。它使用Bootstrap的网格系统来实现所需的布局。请注意，您可能需要根据您的特定要求调整列类（col-md-4）。您可以修改项目（项目类）的内容和样式以满足您的需要。

<html>
<head>
  <title>Bootstrap Grid Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    .banner {
      height: 80px;
      background-color: #f2f2f2;
    }

    .item {
      background-color: #e6e6e6;
      border: 1px solid #cccccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row banner">
      <!-- Your banner content here -->
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="item" style="height: 320px;">Item 1</div>
        <div class="item" style="height: 320px;">Item 2</div>
      </div>
      <div class="col-md-4">
        <div class="item" style="height: 640px;">Item 3</div>
      </div>
      <div class="col-md-4">
        <div class="item" style="height: 160px;">Item 4</div>
        <div class="item" style="height: 80px;">Item 5</div>
        <div class="item" style="height: 400px;">Item 6</div>
      </div>
    </div>
  </div>
</body>
</html>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

需要使用 Bootstrap 创建网格[已关闭]

2条答案

相关问题

热门标签

最新问答