时间戳

首页 > 解决方案 > 伸展以填充特定大小的动态网格

html - 伸展以填充特定大小的动态网格

问题描述

我有一个我正在尝试模仿的网站，但我似乎无法让网格布局与该网站相匹配。这是网站：https ://www.khalidmohtaseb.com/

这是我的代码

body {
  margin-top: 75px;
  /* 50px is the height of the navbar - change this if the navbarn height changes */
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.portfolio-item {
  margin-bottom: 1px;
  margin-top: 1px;
  padding-left: 1px;
  padding-right: 1px;
}

footer {
  margin: 50px 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Portfolio</title>

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="css/4-col-portfolio.css">
</head>

<body>

  <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#about">About</a>
          </li>
          <li><a href="#services">Services</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <div class="container">

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <div class="row">

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300"">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

      <div class="col-md-4 portfolio-item">
        <a href="portfolio-item.html">
          <img class="img-responsive" src="https://via.placeholder.com/300">
        </a>
      </div>

    </div>

    <hr>

  </div>
  <!-- /.container -->

  <div class="container">

    <hr>

    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright &copy; Company 2021</p>
        </div>
      </div>
    </footer>

  </div>
  <!-- /.container -->

  <!-- JavaScript -->
  <script src="js/jquery-1.10.2.js"></script>
  <script src="js/bootstrap.js"></script>

</body>

</html>

我认为我的 CSS 不完整。我认为我不远，但也许我是，我喜欢网站调整图像大小以保持其形状和 3 列设置的方式，直到它变得非常小，然后是两列，然后是移动的一列。

标签： htmlcssbootstrap-4

解决方案

推荐阅读