包装偶数个盒子 bootstrap 5答案

【问题标题】：wrapping even number of boxes bootstrap 5包装偶数个盒子 bootstrap 5
【发布时间】：2022-01-28 22:22:58
【问题描述】：

我有 4 个盒子，我正在尝试在它们之间设置均匀的空格。
这些框的排列取决于屏幕尺寸：

如果是xxl+，则 4 个框排成一条水平线（行）。
否则，如果是md+，那么第一行有两个框，另外两个在另一行。
否则，每一个都排成一行。

我有这个代码：

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

<div class="container-fluid p-0 d-md-flex justify-content-md-evenly flex-md-wrap">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
        <p>some content</p>
    </div>
</div>

此代码得到 1. 和 3. 完成（但不是 2. 因为在某一点上，单个盒子被单独包装）。
我可以解决这个问题并获得 2. 和 3. 通过将前两个框一起包装在一个 div 中，最后两个一起包装在另一个 div 中，但是我无法实现 1.

【问题讨论】：

标签： css bootstrap-4 bootstrap-5

【解决方案1】：

重组标记将帮助您实现所需的布局！

.example {
  display: flex;
  justify-content: space-evenly;
  flex: 1;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .example {
    flex-direction: column;
    align-items:center;
  }
}

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

<div class="container-fluid p-0 d-xxl-flex justify-content-xxl-evenly">
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>


    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

【讨论】：

2. else, if it's md+ then two boxes in the first row and the other two in the another row. 你没有提到这个，这些盒子永远不会在第一行出现一对，在第二行出现最后一对。

【解决方案2】：

如果您接受 CSS 替代解决方案，请考虑以下几点：

使用Flexbox：

.custom {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.example {
  display: flex;
  gap: 1rem;
}

@media screen and (max-width: 768px) {
  .custom {
    gap: 0;
  }
  .example {
    flex-direction: column;
    gap: 0;
  }
}

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

<div class="custom">
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
  <div class="example">
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
    <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
      <p>some content</p>
    </div>
  </div>
</div>

我在这里所做的是利用flexbox 和@media 查询来达到与引导程序相同的效果。如果我没记错的话，引导程序中的md 是>=768px，所以在屏幕大小上设置max-width: 768px 就可以了。

如果您想了解flexbox，请点击here。对于媒体查询，更多内容here。

使用grid 和 2 个@media 查询：

.custom {
  display: flex;
  justify-content: space-evenly;
}

@media screen and (max-width: 1200px) {
  .custom {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .custom {
    display: flex;
    flex-direction: column;
  }
}

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

<div class="custom">
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
  <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
    <p>some content</p>
  </div>
</div>

我在这个上所做的是使用flexbox 来实现数字1 和3 的效果。当屏幕尺寸为1200px 时，转换为grid。 grid 让您一次自定义 2 个维度，因此更容易使用它来实现您想要的 2nd 效果。

【讨论】：

这并没有解决问题，这是我尝试解决的方法之一，但正如您在全屏上看到的那样（当 4 个框排成一行时）第二个和第三个盒子比其他盒子之间的空间大。这很简单，因为您首先将两对盒子之间的线分开，然后在它们之间放置相等的空间，两对之间的空间将是对中每个盒子之间的空间的两倍
@user2401856 如果justifying-content 可以是centered，那么我的编辑中就有你想要的行为。告诉我够不够。
还添加了一个不同的方法，grid 以调整您的编辑。

【解决方案3】：

终于找到了解决办法，主要是靠display: contents属性，连同这个思路一起给出了解决办法

我可以解决这个问题并获得 2. 和 3. 通过将前两个框一起包装在一个 div 中，最后两个一起包装在另一个 div 中，但是我无法实现 1.

我无法实现 1. 因为在 xxl+ 屏幕上，外部 div.container 的 justify-content-xxl-evenly 属性应用于每对的包装 divs 而不是内容本身。
用

包裹第一对和最后一对

display: contents on xxl+ screen

解决了这个问题，因为display: contents 解开元素的内部内容并将其传递给父元素。

这是我对最终解决方案的修改：

@media (min-width: 1400px) {
.d-xxl-contents{
    display: contents !important;
}

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

<div class="container-fluid d-xxl-flex justify-content-xxl-evenly">
    <div class="container-fluid d-flex flex-column align-items-center flex-md-row justify-content-md-evenly d-xxl-contents">
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
    </div>
    <div class="container-fluid d-flex flex-column align-items-center flex-md-row justify-content-md-evenly d-xxl-contents">
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
        <div class="d-flex justify-content-center align-items-center border" style="width: 350px; height: 100px;">
            <p>some content</p>
        </div>
    </div>
</div>

无论如何，我坚信有一个更好的解决方案，尤其是当这个解决方案在多个盒子上泛化时会很长。
如果有人发布更轻的，会很高兴。

【讨论】：

【解决方案4】：

问题在于您对列使用固定宽度。对于良好的响应行为，以百分比设置宽度并使用 max-width 属性。

这是一个不使用@media 查询的简单解决方案。我只使用了引导断点。

.box{
    width: 90%; 
    max-width: 350px;
    height: 100px; 
    background-color: coral;
    margin: 0 auto;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row px-0">
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
    <div class="col-12 col-md-6 col-xxl-3 border" ><p class="box" >some content</p></div>
  </div>
</div>

【讨论】：