如何使用bootstrap或css网格包装2个列表?

Question

我有两个不同长度的对象列表，我想在框中显示。(列表A和列表B)。我希望列表是响应移动和桌面。列表'B'应该只占一列。

我已经能够得到2个列表来渲染，但我不能得到列表'A'来扩展列表'B'完成后的全宽度。

https://jsfiddle.net/heratyian/mcjenLpt/27/

<div class="container">
<div class="row">
<div class="col-6 col-md-8 col-lg-10">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 box">
A1
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A2
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A3
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A4
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A5
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A6
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A7
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A8
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A9
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A10
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A11
</div>
<div class="col-12 col-md-6 col-lg-4 box">
A12
</div>
</div>  
</div>
<div class="col-6 col-md-4 col-lg-2">
<div class="row">
<div class="col-12 box">
B1
</div>
<div class="col-12 box">
B2
</div>
<div class="col-12 box">
B3
</div>
</div>
</div>  
</div>
</div>

这是一个价格表，显示我正在尝试做什么。

。B2A10阿

B1

你可以使用CSS网格。

项必须是容器的直接子项。要解决这个问题，您可以更改HTML，或者使用display: contents;

将其隐藏起来。

.container {
display: grid;
grid-template-columns: 50px 50px 50px;
grid-auto-flow: dense;
}
.list {
display: contents;
}
.list div {
border: solid 1px blue;
}
.B {
grid-column-end: -1;
background-color: lightblue;
}
.A {
order: 2;
}

<div class="container">
<div class="list">
<div class="A">A1</div>
<div class="A">A2</div>
<div class="A">A3</div>
<div class="A">A4</div>
<div class="A">A5</div>
<div class="A">A6</div>
<div class="A">A7</div>
<div class="A">A8</div>
<div class="A">A9</div>
<div class="A">A10</div>
<div class="A">A11</div>
<div class="A">A12</div>
<div class="A">A13</div>
</div>
<div class="list">
<div class="B">B1</div>
<div class="B">B2</div>
<div class="B">B3</div>
</div>
</div>

不幸的是，我不认为有一种方式来样式你的html那样。你基本上是强迫两个独立的列表内容(A和B)在彼此内部基于可用的宽度。内容框(如果你使用div或li)不会自然地以这种方式流动，要做到这一点，需要css/javascript解决方案，可能不会跨浏览器友好…这只是我的意见(对不起s.o)。可能有弹性或网格方法，但绝对超出了规范。好运！

https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/

我接受纠正…@vals: -)这里是如何使它响应没有媒体查询!

.container {
display: grid;
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-template-rows: repeat(16, 60px);
}

<div class="container">
<div class="row">
<div class="col--lg-12">
<div class="row">
<div class="col-12 col-lg-6 col-md-6 col-sm-12 box">
<div class="row">
<div class="col-6 col-md-6 col-lg-4 box"></div>
<div class="col-6 col-md-6 col-lg-4 box"></div>
</div> 
</div>
<div class="col-12 col-lg-6 col-md-6 col-sm-12  box">
<div class="row">
<div class="col-6 col-md-6 col-lg-4 box"></div>
<div class="col-6 col-md-6 col-lg-4 box"></div>
</div> 
</div>
</div>  
</div>
</div>