堆棧內存溢出
  簡體   English   中英

響應式引導表？

[英]Responsive BootStrap-Table?

 原文  2021-11-10 20:33:36  0   1    javascript/ html/ css/ bootstrap-table/ bulma

問題描述

（視頻參考https://streamable.com/grv9iy ）

我正在使用https://bootstrap-table.com特別是 Bulma 樣式表版本（與常規引導樣式表不同！）來制作我的表格。 從視頻中可以看出，表格沒有響應，相反，當表格在屏幕上溢出時，它只是變得可滾動。 有任何想法嗎？

代碼如下，但注意！ 該代碼依賴於 Flask (python) 將 var 的表傳遞給它。

或 codepen https://codepen.io/OOUZI/pen/XWaBRxN 

 <!doctype html> <html lang="en"> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.css"> {% include 'js_html/table-extensions-css.html' %} <body> {% include 'topbar.html' %} {% include 'js_html/quickview.html' %} <style> body { font-family: 'Roboto', Arial, sans-serif; } .wrapper { width: 100%; max-width: 110.25rem; margin: 2rem auto; white-space: normal; } .instructor { width: 100px; word-wrap: break-word; } .label { font-size: .725rem; font-weight: 500; text-transform: uppercase; letter-spacing: +1.3px; margin-bottom: 1rem; } .searchBar { width: 100%; display: flex; flex-direction: row; align-items: center; } #searchQueryInput { width: 100%; height: 2.8rem; background: #f5f5f5; outline: none; border: none; border-radius: 1.625rem; padding: 0 3.5rem 0 1.5rem; font-size: 1rem; } #searchQuerySubmit { width: 3.5rem; height: 2.8rem; margin-left: -3.5rem; background: none; border: none; outline: none; } #searchQuerySubmit:hover { cursor: pointer; } </style> <style> @-webkit-keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spinAround{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.pageloader{bottom:0;left:0;position:absolute;right:0;top:0}.pageloader{position:fixed;padding-top:2em;background:#00d1b2;background:#00d1b2;z-index:999998;transition:transform .35s ease-out,-webkit-transform .35s ease-out;will-change:transform}.pageloader.is-white{background-color:#fff;background:#fff}.pageloader.is-white::after{border-color:#0a0a0a;-webkit-animation:loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-white 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-white .title{color:#0a0a0a}.pageloader.is-black{background-color:#0a0a0a;background:#0a0a0a}.pageloader.is-black::after{border-color:#fff;-webkit-animation:loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-black 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-black .title{color:#fff}.pageloader.is-light{background-color:#f5f5f5;background:#f5f5f5}.pageloader.is-light::after{border-color:#363636;-webkit-animation:loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-light 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-light .title{color:#363636}.pageloader.is-dark{background-color:#363636;background:#363636}.pageloader.is-dark::after{border-color:#f5f5f5;-webkit-animation:loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-dark 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-dark .title{color:#f5f5f5}.pageloader.is-primary{background-color:#00d1b2;background:#00d1b2}.pageloader.is-primary::after{border-color:#fff;-webkit-animation:loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-primary 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-primary .title{color:#fff}.pageloader.is-link{background-color:#3273dc;background:#3273dc}.pageloader.is-link::after{border-color:#fff;-webkit-animation:loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-link 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-link .title{color:#fff}.pageloader.is-info{background-color:#209cee;background:#209cee}.pageloader.is-info::after{border-color:#fff;-webkit-animation:loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-info 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-info .title{color:#fff}.pageloader.is-success{background-color:#23d160;background:#23d160}.pageloader.is-success::after{border-color:#fff;-webkit-animation:loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-success 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-success .title{color:#fff}.pageloader.is-warning{background-color:#ffdd57;background:#ffdd57}.pageloader.is-warning::after{border-color:rgba(0,0,0,.7);-webkit-animation:loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-warning 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-warning .title{color:rgba(0,0,0,.7)}.pageloader.is-danger{background-color:#ff3860;background:#ff3860}.pageloader.is-danger::after{border-color:#fff;-webkit-animation:loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure-danger 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader.is-danger .title{color:#fff}.pageloader:not(.is-bottom-to-top){-webkit-transform:translateY(-100%);transform:translateY(-100%)}.pageloader.is-bottom-to-top{-webkit-transform:translateY(100%);transform:translateY(100%)}.pageloader.is-left-to-right{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.pageloader.is-right-to-left{-webkit-transform:translateX(100%);transform:translateX(100%)}.pageloader.is-active:not(.is-left-to-right),.pageloader.is-active:not(.is-right-to-left){-webkit-transform:translateY(0);transform:translateY(0)}.pageloader.is-active.is-left-to-right,.pageloader.is-active.is-right-to-left{-webkit-transform:translateX(0);transform:translateX(0)}.pageloader::after{position:absolute;top:50%;left:50%;display:block;border-radius:100%;content:'';z-index:9999;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;box-sizing:border-box;border:0 solid #fff;-webkit-animation:loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1);animation:loader-figure 1.15s infinite cubic-bezier(.215,.61,.355,1)}.pageloader .title{position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin:2em 0 0 0;font-size:.875em;letter-spacing:.1em;line-height:1.5em;color:#fff;white-space:nowrap}@-webkit-keyframes loader-figure{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-white{0%{height:0;width:0;background-color:#0a0a0a}29%{background-color:#0a0a0a}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-white{0%{height:0;width:0;background-color:#0a0a0a}29%{background-color:#0a0a0a}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-black{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-black{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-light{0%{height:0;width:0;background-color:#363636}29%{background-color:#363636}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-light{0%{height:0;width:0;background-color:#363636}29%{background-color:#363636}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-dark{0%{height:0;width:0;background-color:#f5f5f5}29%{background-color:#f5f5f5}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-dark{0%{height:0;width:0;background-color:#f5f5f5}29%{background-color:#f5f5f5}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-primary{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-primary{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-link{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-link{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-info{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-info{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-success{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-success{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-warning{0%{height:0;width:0;background-color:rgba(0,0,0,.7)}29%{background-color:rgba(0,0,0,.7)}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-warning{0%{height:0;width:0;background-color:rgba(0,0,0,.7)}29%{background-color:rgba(0,0,0,.7)}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@-webkit-keyframes loader-figure-danger{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}}@keyframes loader-figure-danger{0%{height:0;width:0;background-color:#fff}29%{background-color:#fff}30%{height:2em;width:2em;background-color:transparent;border-width:1em;opacity:1}100%{height:2em;width:2em;border-width:0;opacity:0;background-color:transparent}} </style> <div onload="function()" class="pageloader is-active is-link is-bottom-to-top"><span class="title">Pageloader</span></div> <script> setTimeout(function () { document.getElementById('pageloader').style.display = 'none' document.getElementById('pageloader').style.display = 'none'; }, 2000) <script> <div class="wrapper"> <table data-show-columns-toggle-all="true" classes="table-sm" data-sortable="true" data-filter-control="true" class="is-narrow table-responsive" data-toggle="table" data-search-highlight="true" data-advanced-search="true" data-show-columns="true" data-show-fullscreen="true" data-id-table="advancedTable" data-mobile-responsive="true" data-sticky-header="true" data-pagination="true" data-search="true"> <thead> <tr> <th data-sortable="false" searchable="false">Favorite</th> <th data-sortable="false" searchable="false">Image</th> <th data-field="CRN" data-sortable="true" searchable="true">CRN</th> <th data-field="Subject" data-sortable="true" searchable="true">Subject</th> <th data-field="Course" data-sortable="true" searchable="true">Course</th> <th data-field="Credits" data-sortable="true" searchable="true" >Credits</th> <th data-field="Title" data-sortable="true" searchable="true">Title</th> <th data-field="Days" data-sortable="true" searchable="true">Days</th> <th data-field="Times" data-sortable="true" searchable="true" >Times</th> <th data-field="Instructors" data-sortable="true" searchable="true">Instructor</th> <th data-field="Attribute" data-sortable="true" searchable="true">Attribute</th> <th data-field="InstructorDiff" data-sortable="true" searchable="true">Instructors Difficulty</th> <th data-field="InstructorRating" data-sortable="true" searchable="true">Instructors Rating</th> <th data-field="WouldTakeAgain" data-sortable="true" searchable="true">Would Take Again</th> <th data-field="Comments" data-sortable="false" searchable="false">Comments</th> </tr> </thead> <tbody> {% for course in courses %} <tr> <th scope="favorite_course"> <form action="/favorite_courses/api/add_course/{{course.id}}" method="post"> <button class="button is-success" name="foo" value="upvote">+</button> </form> </th> {% if instructors[course.instr]['image'] == None or instructors[course.instr]['image'] == "" %} <div class="image"> </div> <td class="is-image-cell"> <div class="image"> <img src="https://www.yu.edu/sites/default/files/default_images/Placeholder_0.png" style="max-height:100px;width:100px;" class="is-rounded instr-profile"> </div> </td> {% else %} <div class="image"> </div> <td class="is-image-cell"> <div class="image"> <img src="{{instructors[course.instr]['image']}}" class="is-rounded instr-profile" style="max-height:100px;width:100px;"> </div> </td> {% endif %} <td data-label="CRN">{{course.crn}}</td> <td data-label="Subject">{{course.subj}}</td> <td data-label="Course">{{course.crse}}</td> <td data-label="Credits">{{course.cred}}</td> <td class="instructor" data-label="Title">{{course.title}}</td> <td data-label="Days">{{course.days}}</td> <td data-label="Times">{{course.time}}</td> <td data-label="Instructor">{{course.instr}}</td> <td data-label="Attribute">{{course.attribute}}</td> <td data-width="10" data-width-unit="%" data-label="Instructors Difficulty" class="is-progress-cell"> <div class="columns"> <div class="column"> <p class="bd-notification is-info"><center>{{instructors[course.instr]['profDiff']}}%</center></p> <div class="columns is-mobile"> <div class="column"> {% if instructors[course.instr]['profDiff'] | int >= 75 %} <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td> {% elif instructors[course.instr]['profDiff'] | int >= 50 %} <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td> {% else %} <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profDiff']}}">{{instructors[course.instr]['profDiff']}}</progress></td> {% endif %} </div> </div> </div> </div> </td> <td data-label="Instructors Rating" class="is-progress-cell"> <div class="columns"> <div class="column"> <p class="bd-notification is-info"><center>{{instructors[course.instr]['profRating']}}%</center></p> <div class="columns is-mobile"> <div class="column"> {% if instructors[course.instr]['profRating'] | int >= 75 %} <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td> {% elif instructors[course.instr]['profRating'] | int>= 50 %} <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td> {% else %} <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profRating']}}">{{instructors[course.instr]['profRating']}}</progress></td> {% endif %} </div> </div> </div> </div> </td> <td data-label="Would Take Again" class="is-progress-cell"> <div class="columns"> <div class="column"> <p class="bd-notification is-info"><center>{{instructors[course.instr]['profWouldTakeAgain']}}%</center></p> <div class="columns is-mobile"> <div class="column"> {% if instructors[course.instr]['profWouldTakeAgain'] | int >= 75 %} <progress max="100" class="progress is-small is-primary" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress> {% elif instructors[course.instr]['profWouldTakeAgain'] | int >= 50 %} <progress max="100" class="progress is-small is-warning" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress> {% else %} <progress max="100" class="progress is-small is-danger" value="{{instructors[course.instr]['profWouldTakeAgain']}}">{{instructors[course.instr]['profWouldTakeAgain']}}</progress> {% endif %} </div> </div> </div> </div> </td> <!-- {% include 'course_list/comments.html' %} --> {% endfor %} </tr> </tbody> </table> </div> </div> <script> </script> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/themes/bulma/bootstrap-table-bulma.min.js"></script> {% include 'js_html/table-extensions-js.html' %} {% include 'footer.html' %} </body> </html>

1 個解決方案

解決方案1
 0  2021-11-10 21:11:15

現在我明白你的問題了。 看看這個頁面。 這是 Boostrap Table 框架的默認行為。 當您超過一定數量的列時，它會啟用水平滾動條。 而我之前多次看到的 - 這是正常行為。

看，當你只留下前 11 個單元格時 - 滾動條隱藏：

在此處輸入圖片說明

可能的解決方法：

  1. 使用我用來隱藏上面的列的相同設置按鈕並創建默認配置，該頁面僅加載最重要的列，直到它響應為止。

  2. 減少填充，減少字體大小，圖像大小等。

  3. 如果此表將被多個回訪者廣泛使用 - 使用 Javascript localStorage 並根據每個用戶在第一步中使用該按鈕選擇隱藏/顯示的內容為每個用戶進行默認配置。 只需添加功能來記住每個用戶想要看到的內容，並在他再次訪問時為他顯示相同的列。

希望我能幫助你，但在這種情況下你不能做太多，因為它是一張桌子。 您不能使用 CSS 並強制 Column 像通常的 DIV 元素那樣分成另一行，它對於表格來說看起來很糟糕......

更新：

添加此 CSS 將使您的表格響應 1920 倍...屏幕：

.bootstrap-table .fixed-table-container .table thead th .th-inner {
   padding: 0.15em;
   font-size: 11px;
}

.button, .file-cta, .file-name, .input, .pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .textarea  {
   font-size: 0.7rem;
}

.table.is-narrow td, .table.is-narrow th {
   padding: 0.25em 0.3em;
}

.bootstrap-table .fixed-table-container .table td {
   font-size: 13px;
}

在此處輸入圖片說明

PS - 最好擺脫至少 1-3 列。

更新 2：

順便說一句，您的最后一列將只是帶有進度條的百分比值。 您可以：

  • 減少進度條和評論標簽的最大寬度； 或者
  • 您可以在百分比值周圍制作圓形進度條。

在此處輸入圖片說明

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 刷新Bootstrap表 Bootstrap-Table 自定義搜索 編輯bootstrap-table中的行 Bootstrap-Table filterBy Not Working Bootstrap-table showAllColumns方法 在沒有Bootstrap-Table的情況下將JSON加載到表中 使用JavaScript函數刷新Bootstrap表表 引導表搜索對於 rowspan 無法正常工作 如何旋轉引導表（橫向視圖）？ Bootstrap-table 如何使用 exportOptions
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM