เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

โดย **pprn** » 29/10/2018 10:51 pm

สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ ดังนี้ค่ะ

ใน Desktop จะเห็นดังนี้

ใน Mobile จะเห็นดังนี้

: pre2.jpg (21.14 KiB) Viewed 3028 times

ตัวอย่าง code ทำได้แค่อยู่ใน Desktop เท่านั้นค่ะ แต่ย่อ ใน Mobile ไม่ได้

<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<center>
    <nav>
        <ul class="pagination">
            <li class="left-etc" style="display: inline;"><a href="#">«</a></li>
            <li class="page-away-14" style="display: inline;"><a href="#">1</a></li>
            <li class="page-away-13" style="display: inline;"><a href="#">2</a></li>
            <li class="page-away-12" style="display: inline;"><a href="#">3</a></li>
            <li class="page-away-11" style="display: inline;"><a href="#">4</a></li>
            <li class="page-away-10" style="display: inline;"><a href="#">5</a></li>
            <li class="page-away-9" style="display: inline;"><a href="#">6</a></li>
            <li class="page-away-8" style="display: inline;"><a href="#">7</a></li>
            <li class="page-away-7" style="display: inline;"><a href="#">8</a></li>
            <li class="page-away-6" style="display: inline;"><a href="#">9</a></li>
            <li class="page-away-5" style="display: inline;"><a href="#">10</a></li>
            <li class="page-away-4" style="display: inline;"><a href="#">11</a></li>
            <li class="active page-away-3" style="display: inline;"><a href="#">12</a></li>
            <li class="page-away-2" style="display: inline;"><a href="#">13</a></li>
            <li class="page-away-1" style="display: inline;"><a href="#">14</a></li>
            <li class="page-away-0" style="display: inline;"><span>15</span></li>
            <li class="page-away-1" style="display: inline;"><a href="#">16</a></li>
            <li class="page-away-2" style="display: inline;"><a href="#">17</a></li>
            <li class="page-away-3" style="display: inline;"><a href="#">18</a></li>
            <li class="page-away-4" style="display: inline;"><a href="#">19</a></li>
            <li class="page-away-5" style="display: inline;"><a href="#">20</a></li>
            <li class="page-away-6" style="display: inline;"><a href="#">21</a></li>
            <li class="page-away-7" style="display: inline;"><a href="#">22</a></li>
            <li class="page-away-8" style="display: inline;"><a href="#">23</a></li>
            <li class="page-away-9" style="display: inline;"><a href="#">24</a></li>
            <li class="page-away-10" style="display: inline;"><a href="#">25</a></li>
            <li class="right-etc" style="display: inline;"><a href="#">»</a></li>
        </ul>
        </nav>
</center>
</body></html>

ผลลัพธ์ของ Code ที่เขียน

: pre3.jpg (38.83 KiB) Viewed 3028 times

ต้องเพิ่ม CSS หรือเขียน Javascript อย่างไรบ้างคะ ขอบคุณค่ะ

เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

Q - สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ

ตอบกระทู้

มุมมองที่ขยายได้ กระทู้แนะนำ: Q - สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ

Q - สอบถามวิธีการทำตัวแบ่งหน้า (pagination) ให้ย่อเมื่ออยู่ในโหมดมือถือค่ะ