我有如下的callendar的實作:
。span class="hljs-selector-class">.btn-etable {
color: #fff;
background-color: #d92b3a;
邊框顏色: #d92b3a;
}
.btn-etable:hover,
.btn-etable.selected {
color: #d92b3a;
background-color: #fff;
邊框顏色: #d92b3a;
}
.btn-ppl {
width: 48px;
height: 48px;
margin: 2px;
}
.callendar {
display: flex;
align-items: stretch;
flex-direction: column;
width: 100%。
}
.week,
.callendar_header {
display: flex;
align-items: stretch;
flex-direction: 行。
justify-content: stretch;
}
.callendar_header {
order: "-1"。
}
.callendar_header span {
width: 48px;
margin: 1px;
text-align: center;
flex-grow: 1;
}
.callendar-item,
.blank {
width: 48px;
flex-grow: 1;
margin: 1px;
}
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet" />
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"。
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="/span>
crossorigin="anonymous">/span></script>/span>
< script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"/span> crossorigin="anonymous"/span>> </script>>
< div id="callendar_view" class="callendar">
< div id="callendar_header" class="callendar_header">/span>
<span>/span>Κυρ</span>/span>
<span>Δευ</span>/span>
<span>Τρι</span>/span>
<span>/span>Τετ</span>/span>
<span>Πεμ</span>/span>
<span>Παρ</span>/span>
<span>Σαβ</span>/span>
</div>/span>
< div class="week" data-week="1" style="order: 1;">
<div class="blank" style="order: -1;"> </div>
< button class="btn btn-secondary blank disabled callendar-item" style="order: 1; text-alighn: center;">20</button><。 button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-21" data-parent="callendar_colapse" data-input-name="reserve_date"
data-form=" reserv_form" style="order: 2;" data-callback="onSelectDate"> 21</button>< button class="btn btn-etable btn- radio callendar-item" data-value="2021-09-22" data-parent="callendar_colapse"/span> data-input-name="reserve_date" data-form="reserve_form"
style="order: 3;" data-callback="onSelectDate"> 22</button>< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-23" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate"> 23</button>
<button
class="btn btn-etable btn-radio callendar-item" data-value="2021-09-24" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 5;" data-callback="onSelectDate">24</button> <。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-25" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 6;" data-callback="onSelectDate"> 25< <button></div>
<div class="week"
data-week="2"/span> style="order: 2;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-26" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 26</button> <button class="btn btn-secondary blank disabled callendar-item"
style="order:1; text-alighn: center;">27</button><。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-28" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 2;" data-callback="onSelectDate"> 28</button>
<button
class="btn btn-etable btn-radio callendar-item" data-value="2021-09-29" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 3;" data-callback="onSelectDate"> 29</button>< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-30" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate"> 30</button> <button class="btn btn-etable btn-radio callendar-item"。
data-value="2021-10-01"/span> data-parent="callendar_colapse"/span> data-input- name="reserve_date" data-form="reserve_form" style="order: 5;" data-callback="onSelectDate">1</button> < button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-02"
data-parent="callendar_colapse"/span> data-input-name="reserve_date" data-form="reserve_form" style="order: 6;" data-callback="onSelectDate"> 2< button></div>
< div class="week" data-week="3" style="order: 3;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-03" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 3</button> <button class="btn btn-secondary blank disabled callendar-item"
style="order:1; text-alighn: center;">4</button><。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-05" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 2;" data-callback="onSelectDate">5</butt>
<button
class="btn btn-etable btn-radio callendar-item" data-value="2021-10-06" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 3;" data-callback="onSelectDate"> 6</button><。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-07" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate"> 7</button> <button class="btn btn-etable btn-radio callendar-item"。
data-value="2021-10-08"/span> data-parent="callendar_colapse"/span> data-input- name="reserve_date" data-form="reserve_form" style="order: 5;" data-callback="onSelectDate"> 8</button>< button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-09"
data-parent="callendar_colapse"/span> data-input-name="reserve_date" data-form="reserve_form" style="order: 6;" data-callback="onSelectDate"> 9< button></div>
< div class="week" data-week="4"/span> style="order: 4;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-10" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 10</button>
<div class=" blank" style="order: 106;"></div>>
<div class=" blank" style="order: 105;"></div>>
<div class=" blank" style="order: 104;"></div>>
<div class=" blank" style="order: 103;"></div>>
<div class=" blank" style="order: 102;"></div>>
<div class=" blank" style="order: 101;"></div>>
</div>/span>
</div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
但在小螢屏(360X640)尺寸下,列似乎不符合順序:
我怎樣才能使它在小螢屏尺寸下也有均勻的間距? 我想要的是一個表格的外觀,無論螢屏大小如何,都能均勻地增長和收縮。 你知道我怎樣才能做到這一點嗎?
uj5u.com熱心網友回復:
你需要在.btn類中重置padding。添加padding: 0;到這些類.callendar-item和.blank。
CSS
.btn.callendar-item,
.btn.blank {
padding: 0;
span class="hljs-selector-class">.btn-etable {
color: #fff;
background-color: #d92b3a;
邊框顏色: #d92b3a;
}
.btn-etable:hover,
.btn-etable.selected {
color: #d92b3a;
background-color: #fff;
邊框顏色: #d92b3a;
}
.btn-ppl {
width: 48px;
height: 48px;
margin: 2px;
}
.callendar {
display: flex;
align-items: stretch;
flex-direction: column;
width: 100%。
}
.week,
.callendar_header {
display: flex;
align-items: stretch;
flex-direction: 行。
justify-content: stretch;
}
.callendar_header {
order: "-1"。
}
.callendar_header span {
width: 48px;
margin: 1px;
text-align: center;
flex-grow: 1;
}
.callendar-item,
.blank {
width: 48px;
flex-grow: 1;
margin: 1px;
}
/*新的行數 */; }
.btn.callendar-item,
.btn.blank {
padding: 0;
}
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="styleheet" />
<script src="https://code.jquery.com/jquery-3.5.1.min. js" integrity="sha256- 9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"/span>> </script>>
< script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"/span> crossorigin="anonymous"/span>> </script>>
< div id="callendar_view" class="callendar">
< div id="callendar_header" class="callendar_header">/span>
<span>/span>Κυρ</span>/span>
<span>Δευ</span>/span>
<span>Τρι</span>/span>
<span>/span>Τετ</span>/span>
<span>Πεμ</span>/span>
<span>Παρ</span>/span>
<span>Σαβ</span>/span>
</div>/span>
< div class="week" data-week="1" style="order: 1;">
<div class="blank" style="order: -1;"> </div>
< button class="btn btn-secondary blank disabled callendar-item" style="order: 1; text-alighn: center;">20</button><。 button class="btn btn-etable btn-radio callendar-item" data-value="2021-09-21" data-parent="callendar_colapse" data-input-name="reserve_date"
data-form=" reserv_form" style="order: 2;" data-callback="onSelectDate"> 21</button>< button class="btn btn-etable btn- radio callendar-item" data-value="2021-09-22" data-parent="callendar_colapse"/span> data-input-name="reserve_date" data-form="reserve_form"
style="order: 3;" data-callback="onSelectDate"> 22</button>< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-23" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate"> 23</button>
< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-24" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 5;" data-callback="onSelectDate"> 24</button> <button class="btn btn-etable btn-radio callendar-item"。
data-value="2021-09-25"/span> data-parent="callendar_colapse"/span> data-input- name="reserve_date" data-form="reserve_form" style="order: 6;" data-callback="onSelectDate"> 25< <button></div>
< div class="week" data-week="2" style="order: 2;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-26" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 26</button> <button class="btn btn-secondary blank disabled callendar-item"
style="order:1; text-alighn: center;">27</button><。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-28" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 2;" data-callback="onSelectDate"> 28</button>
< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-09-29" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 3;" data-callback="onSelectDate"> 29</button> <button class="btn btn-etable btn-radio callendar-item"。
data-value="2021-09-30"/span> data-parent="callendar_colapse"/span> data-input- name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate">30</button> < button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-01"
data-parent="callendar_colapse"/span> data-input-name="reserve_date" data-form="reserve_form" style="order: 5;" data-callback="onSelectDate">1</button> < button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-02" data-parent="callendar_colapse"
data-input-name="reserve_date" data- form="reserve_form" style="order: 6;" data-callback="onSelectDate"> 2< button></div>
< div class="week" data-week="3" style="order: 3;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-03" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 3</button> <button class="btn btn-secondary blank disabled callendar-item"
style="order:1; text-alighn: center;">4</button><。 button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-05" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 2;" data-callback="onSelectDate">5</butt>
< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-06" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 3;" data-callback="onSelectDate"> 6</button> <button class="btn btn-etable btn-radio callendar-item"。
data-value="2021-10-07"/span> data-parent="callendar_colapse"/span> data-input- name="reserve_date" data-form="reserve_form" style="order: 4;" data-callback="onSelectDate"> 7</button>< button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-08" data-parent="callendar_colapse"
data-input-name="reserve_date" data- form="reserve_form" style="order: 5;" data-callback="onSelectDate"> 8</button>< button class="btn btn-etable btn-radio callendar-item" data-value="2021-10-09" data-parent="callendar_colapse" data-input-name="reserve_date"
data-form=" reserv_form" style="order: 6;" data-callback="onSelectDate"> 9< button></div>
< div class="week" data-week="4"/span> style="order: 4;">< button class="btn btn-etable btn-radio callendar- 專案" data-value="2021-10-10" data-parent="callendar_colapse" data-input-name="reserve_date" data-form="reserve_form" style="order: 0;" data-callback="onSelectDate"> 10</button>
<div class=" blank" style="order: 106;"></div>>
<div class=" blank" style="order: 105;"></div>>
<div class=" blank" style="order: 104;"></div>>
<div class=" blank" style="order: 103;"></div>>
<div class=" blank" style="order: 102;"></div>>
<div class=" blank" style="order: 101;"></div>>
</div>/span>
</div>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
添加以下代碼到你的CSS
中@media(max-width:400px){
.btn {
padding: 1vw!important;
字體大小:5vw!重要。
}
.callendar_header span {
寬度: 48px;
margin: 1px;
text-align: center;
flex-grow: 1;
字體大小: 6vw;
}
}
它將被解決!
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/321644.html
標籤:
上一篇:無法使用bootstrap得到一個回應式的網頁。無法使用容器和列得到回應式的布局
下一篇:移除帶有額外引數的事件監聽器
