主页 / 问题 / 1424231
Accepted
Majestio
Asked:2022-08-27 04:20:02 +0000 UTC2022-08-27 04:20:02 +0000 UTC

Bootstrap 5 基​​于宽度的块放置

  • 772

flexbox请举例说明如何grid使用Bootstrap 5. 您需要提出以下要求：

  1. 只有四个街区
  2. 最小块宽度为240px，真正的块宽度是所有可用的，但不超过512px
  3. 如果所有四个块的宽度都不适合，则需要制作 2x2
  4. 如果 2x2 也不适合宽度，则制作 1x4
  5. 所有块在任何位置居中
  6. 所有块的高度，在任何位置，都是相同的 - 并且等于最高的块，按其内容
  7. 不能使用嵌套块，这是必须的！

让它像这样：

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

考虑到要求 1-7，这可以做到吗？

添加（我在 flex 上的版本，嗯，有点像这样）：

<div class="d-flex flex-wrap mt-4 mb-4">

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-1.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-1</h2>
        <p class="card-text fs-6">Some text 1.</p>
      </div>
      <a href="link-1.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-2.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-2</h2>
        <p class="card-text fs-6">Some text 2.</p>
      </div>
      <a href="link-2.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-3.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-3</h2>
        <p class="card-text fs-6">Some text 3.</p>
      </div>
      <a href="link-1.html" class="stretched-link"></a>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 col-12 p-1">
    <div class="cards card h-100 shadow-sm">
      <img src="/assets/img/graphic-3.png" class="card-img-top size-64 mx-auto mt-4"/>
      <div class="card-body">
        <h2 class="card-title">Title-3</h2>
        <p class="card-text fs-6">Some text 3.</p>
      </div>
      <a href="link-3.html" class="stretched-link"></a>
    </div>
  </div>

 </div>
html flexbox

1 个回答

  1. Best Answer

    必要的

    $enable-grid-classes: false
$enable-cssgrid: true

    这里写着 https://getbootstrap.com/docs/5.1/layout/css-grid/#how-it-works

    引导 CSS 网格示例bootstrap 5

    没有的例子bootstrap 5

    * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  padding: 1rem;
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(15rem, 32rem));
  grid-auto-rows: 1fr;
  justify-content: center;
}

.grid__item {
  padding: 1rem;
  border: 1px solid #ccc;
}

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, minmax(15rem, 32rem));
  }
}

@media (max-width: 576px) {
  .grid {
    grid-template-columns: repeat(1, minmax(15rem, 32rem));
  }
}
    <div class="grid">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
  <div class="grid__item">4<br> long text</div>
</div>

    • 1

相关问题