無法在div表/單元引導結構中獲得可滾動的div

我使用 Bootstrap 4，我不能在一個結構中創建一個可滾動的 div，其中 2 個 div 并排，右側 div 具有固定寬度，右側的第二個 div 回應地占用所有左側空間。

作業代碼：

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

可滾動的 div 作業代碼：

  <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
  </div>

但是如果我將可滾動的 div 放在 Hello world d-table-cell div 中，它就不起作用。overflow-x: auto沒有效果。

我已經完成了一個 jsfiddle（只需從第二個 d-table div 中洗掉 display:none !important;）： https ://jsfiddle.net/LondonUK371/zdcjfmv6/8/

如何做到這一點，“Hello world”所在的可滾動div？它可以帶或不帶 Bootstrap。

uj5u.com熱心網友回復：

將樣式添加到帶有類table-layout: fixed的 div 中。.d-table這將防止表格單元格影響表格的整體寬度。

https://jsfiddle.net/WizardCoder/6gmryqca/6/

Table Layout Fixed
設定固定的表格布局演算法。表格和列的寬度由 table 和 col 的寬度或第一行單元格的寬度設定。其他行中的單元格不影響列寬。如果第一行沒有寬度，則列寬在整個表格中均分，無論單元格內的內容如何

CSS

.cell {
  width:300px;
  background: red;
  height: 100px;
}

.table-layout-fixed {
  table-layout: fixed;
}

HTML

<div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
    <div class="cell d-inline-block"></div>
</div>

<div class="d-table mt-3" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cell bg-success">
      Hello world
   </div>
</div>

<div class="d-table mt-3 table-layout-fixed" style="width:100%;">
   <div class="d-table-cell" style="width:200px">
       Menu Left
   </div>
   <div class="d-table-cel bg-success">
      <div class="mx-auto bg-warning overflow-auto" style="width:100%;white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
        <div class="cell d-inline-block"></div>
      </div>
  </div>
</div>

uj5u.com熱心網友回復：

感謝 WizardCoder 解決方案，我偶然注意到我們可以將table-layout:fixed表格單元格 div 放在我們想要帶有滾動條的長 div 的位置：

     <div class="d-table" style="table-layout: fixed;width:100%;">  
        <div class="bg-warning overflow-auto" style="white-space: nowrap;overflow-x: auto;overflow-y: hidden;-webkit-overflow-scrolling: touch;">
...
        </div>
      </div>

https://jsfiddle.net/LondonUK371/a6cm9xs5/

如果我們無法弄清楚為什么table-layout:fixed頂部的 d-table div 不夠用，這將很有用。

標籤：css 推特引导 滚动条 水平滚动

上一篇：python-PyQt5僅在發出陳述句所在的類中發出信號（預期行為？）

下一篇：如何在col-mdbootstrap中調整字體大小或字體對齊