Bootstrap 5不适合100%宽度和100%高度：2行5列布局

你能帮我修复这个Bootstrap 5代码，以适应所有16：9全屏设备（移动的和桌面/1080 p/2160 p浏览器）100%宽度和100%高度？（没有滚动到右边，也没有滚动到下面）我读了100+的例子和教程关于这个，没有找到任何工作解决方案。所有图像是16：9比例。
在1920 p宽度横向移动的屏幕仍然需要滚动约5%的权利和向下。但它只是间距和没有信息的权利和向下。也一样的桌面太多。
理想情况：第一行大约40%的高度，第二行大约60%的高度，以适应5列在1行相同的大小。在第一列的图像应该适合这40%的总高度。
理想草图布局：

------------------------------------------------------
-                                                    -
-          big-img-big-img                           -
-          big-img-big-img    have a nice day        -
-          big-img-big-img                           -
-          big-img-big-img                           -
-          big-img-big-img                           -
-          big-img-big-img                           -
------------------------------------------------------
-                                                    -
-   img-img   img-img   img-img   img-img   img-img  -
-   img-img   img-img   img-img   img-img   img-img  -
-   img-img   img-img   img-img   img-img   img-img  -
-    text      text      text      text      text    -
-                                                    -
------------------------------------------------------

源代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</head>

<body>
<div class="d-flex flex-column vw-100 vh-100">
  <div class="row justify-content-center row-cols-1">
    <div class="card mb-4 justify-content-center" style="max-width: 1920px;">
      <div class="row g-0">
        <div class="col-md-4"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
        <div class="col-md-4">
          <div class="card-body">
            <h5 class="card-title">Have a nice day!</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row d-flex justify-content-center row-cols-5">
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 1</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 2</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 3</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 4</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-2  col-md-2 col-sm-2">
      <div class="card mb-3" style="max-width: 1920px;">
        <div class="row g-0">
          <div class="col-md-12"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid rounded-start" alt="..."> </div>
          <div class="col-md-12">
            <div class="card-body">
              <h5 class="card-title">Hello 5</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

理想的，如果5列适合100%的宽度和没有滚动到右边。请帮助我如何可能适合在1个屏幕没有任何滚动的权利和向下！似乎它已经响应，但需要修复更好。谢谢！

关于bootstrap有几点：

如果同一行中各列的图像具有相同的纵横比，则它们将具有相同的高度。
一行中的网格项目数为12。

因此，如果您想要40%和60%，则为col-5和col-7或col-4和col-8。这符合第一列的需求。
第二行更直接，你可以有一个row和几列col-2或col。
我的意思是：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">

  <div class="col-5">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
  </div>

  <div class="col-7">
    Place content here.
  </div>

</div>

<div class="row">

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

  <div class="col-2">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/1280px-16x9_by_Pengo.svg.png" class="img-fluid" />
    <p>Some text here.</p>
  </div>

</div>

Bootstrap 5不适合100%宽度和100%高度：2行5列布局

1条答案

相关问题

热门标签

最新问答