如何使用引導程式或css網格包裝2個串列？

我有 2 個不同長度的物件串列，我想在框中顯示。（串列 A 和串列 B）。我希望串列能夠回應移動設備和桌面設備。串列“B”應該只占 1 列。

我已經能夠獲得 2 個要呈現的串列，但在串列“B”完成后，我無法獲得串列“A”來擴展整個寬度。

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>

這是一個降價表，顯示我正在嘗試做的事情。

是否有一個 CSS 網格屬性來告訴串列“A”采用完整的可用寬度？我正在使用引導網格，但如果需要，我對 css-grid 開放。

uj5u.com熱心網友回復：

您可以使用 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>

uj5u.com熱心網友回復：

不幸的是，我認為沒有辦法以這種方式設定您的 html 樣式。您基本上是根據可用寬度在彼此內部強制兩個單獨的串列內容（A 和 B）。內容框（如果您使用的是 div 或 li 的）不會自然地以這種方式流動，并且要做到這一點需要一個可能不會跨瀏覽器友好的 css/javascript 解決方案......只是我的意見（對不起）。可能有彈性盒或網格方法，但絕對超出了這里的規范。祝你好運！

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);
}

uj5u.com熱心網友回復：

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

標籤：css 推特引导 CSS网格

上一篇：使用Bootstrap和CSS在右下角定位錯誤訊息（警報）

下一篇：如何讓Bootstrap列中的影像緊靠視口邊緣？