包装偶数盒引导程序5

我有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。

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

.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>

如果您接受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查询来实现与bootstrap相同的效果。如果我没记错的话，引导程序中的md就是>=768px，所以在屏幕大小上设置max-width: 768px就可以了。

如果您想学习flexbox，请单击此处。对于媒体查询，请点击此处了解更多信息。

使用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个维度，所以使用它来实现你想要的第二个效果要容易得多。

我终于找到了解决方案，它主要取决于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>

不管怎样，我坚信有一个更好的解决方案，特别是这个解决方案在多个盒子上推广时会很长
如果有人发布一个较轻的，我会很高兴。

问题在于对列使用固定宽度。为了获得良好的响应行为，请以百分比设置宽度，并使用最大宽度属性。

这里有一个不使用@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>

相关内容

最新更新

热门标签：