বুটস্ট্র্যাপ 4 প্রতিক্রিয়াশীল সারণী 100% প্রস্থ গ্রহণ করবে না

Question 1

আমি বুটস্ট্র্যাপ 4 ব্যবহার করে একটি ওয়েব অ্যাপ তৈরি করছি এবং কিছু অদ্ভুত সমস্যার সমাধান করছি। মোবাইল ডিভাইসে টেবিলগুলির অনুভূমিক স্ক্রোলিংয়ের জন্য আমি বুটস্ট্র্যাপের টেবিল-প্রতিক্রিয়াশীল শ্রেণিটি ব্যবহার করতে চাই। ডেস্কটপ ডিভাইসগুলিতে টেবিলটি ডিআইভির প্রস্থের 100% অবধি গ্রহণ করা উচিত।

আমি আমার টেবিলটিতে। টেবিল-প্রতিক্রিয়াশীল ক্লাসটি প্রয়োগ করার সাথে সাথেই টেবিলটি অনুভূমিকভাবে সঙ্কুচিত হবে এবং প্রস্থের 100% আর গ্রহণ করবে না। কোন ধারনা?

এখানে আমার মার্কআপ:

<!DOCTYPE html>
<html lang="en" class="mdl-js">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="application-name" content="">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="/css/bundle.min.css">
</head>
<body>
    <div class="container-fluid no-padding"> 
        <div class="row">
            <div class="col-md-12">
                <table class="table table-responsive" id="Queue">
                    <thead>
                        <tr>
                            <th><span span="sr-only">Priority</span></th>
                            <th>Origin</th>
                            <th>Destination</th>
                            <th>Mode</th>
                            <th>Date</th>
                            <th><span span="sr-only">Action</span></th>
                         </tr>
                      </thead>
                      <tbody>
                          <tr class="trip-container" id="row-6681470c-91ce-eb96-c9be-8e89ca941e9d" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d">
                              <td>0</td>
                              <td>PHOENIX, AZ</td>
                              <td>SAN DIEGO, CA</td>
                              <td>DRIVING</td>
                              <td><time datetime="2017-01-15T13:59">2017-01-15 13:59:00</time></td>
                              <td><span class="trip-status-toggle fa fa-stop" data-id="6681470c-91ce-eb96-c9be-8e89ca941e9d" data-trip-status="1"></span></td>
                          </tr>
                          <tr class="steps-container" data-steps-for="6681470c-91ce-eb96-c9be-8e89ca941e9d" style="display: none;">
                              <td colspan="6" class="no-padding"></td>
                          </tr>
                      </tbody>
                  </table>
              </div>
           </div>
           <br>
        </div>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bundle.min.js"></script>
     </body>
</html>

আমি যদি টেবিল-প্রতিক্রিয়াশীল শ্রেণিতে 100% প্রস্থ প্রয়োগ করি তবে এটি টেবিলটিকে নিজেই 100% প্রশস্ত করে তোলে তবে শিশু উপাদানগুলি (টিবিডিওয়াই, টিআর, ইত্যাদি) এখনও সংকীর্ণ।

Question 2

নিম্নলিখিত কাজ করবে না। এটি অন্য ইস্যু সৃষ্টি করে। এটি এখন 100% প্রস্থ করবে কিন্তু এটি ছোট ডিভাইসে প্রতিক্রিয়াশীল হবে না:

.table-responsive {
    display: table;
}

এই সমস্ত উত্তর সুপারিশ করে আরও একটি সমস্যা চালু করেছে display: table;। আপাতত একমাত্র সমাধান হ'ল এটি একটি মোড়ক হিসাবে ব্যবহার করা:

<div class="table-responsive">
  <table class="table">
...
 </table>
</div>

Question 3

এই সমাধানটি আমার পক্ষে কাজ করেছে:

আপনার টেবিল উপাদানটিতে কেবল একটি অন্য শ্রেণি যুক্ত করুন: w-100 d-block d-md-table

সুতরাং এটি হবে: <table class="table table-responsive w-100 d-block d-md-table">

বুটস্ট্র্যাপ 4 এর জন্য w-100প্রস্থটি 100% d-block(প্রদর্শন: ব্লক) এবং এ সেট করুনd-md-table (প্রদর্শন: ন্যূন-প্রস্থে সারণী: 576px) এ সেট করুন

বুটস্ট্র্যাপ 4 ডিসপ্লে ডক্স

Question 4

আপনি যদি V4.1 ব্যবহার করছেন এবং তাদের ডক্স অনুসারে, টেবিলের জন্য সরাসরি টেবিল-প্রতিক্রিয়া নির্ধারণ করবেন না। টেবিলটি .table হওয়া উচিত এবং আপনি যদি এটির অনুভূমিকভাবে স্ক্রোলযোগ্য (প্রতিক্রিয়াশীল) হতে চান তবে এটি একটি টেবিল-প্রতিক্রিয়াশীল ধারকটির মধ্যে যুক্ত করুন ( <div>উদাহরণস্বরূপ)।

প্রতিক্রিয়াশীল টেবিলগুলি সহজেই টেবিলগুলি অনুভূমিকভাবে স্ক্রোল করার অনুমতি দেয়। .Table- প্রতিক্রিয়াযুক্ত একটি টেবিল মোড়ানো দ্বারা সমস্ত ভিউপোর্টে জুড়ে যে কোনও টেবিলকে প্রতিক্রিয়াশীল করুন ।

<div class="table-responsive">
  <table class="table">
  ...
  </table>
</div>

এটি করে, কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই।

ওপি-র কোডে .tol- প্রতিক্রিয়াটি বাইরে .col-md-12 এর পাশাপাশি ব্যবহার করা যেতে পারে।

Question 5

কিছু কারণে বিশেষত প্রতিক্রিয়াশীল টেবিলটি যেমন করা উচিত তেমন আচরণ করে না। পরিত্রাণ পেয়ে আপনি এটি প্যাচ করতে পারেনdisplay:block;

.table-responsive {
    display: table;
}

আমি একটি বাগ রিপোর্ট ফাইল করতে পারি।

সম্পাদনা করুন:

এটি একটি বিদ্যমান বাগ।

Question 6

এই উত্তরগুলির কোনওটিই কাজ করছে না (তারিখ আজ 9 ডিসেম্বর 2018)। এখানে সঠিক রেজোলিউশনটি আপনার টেবিলটিতে .table- প্রতিক্রিয়াশীল-এসএম যোগ করার জন্য:

<table class='table table-responsive-sm'>
[Your table]
</table>

এটি প্রতিক্রিয়াশীল দিকটি কেবল এসএম ভিউ (মোবাইল) এ প্রয়োগ করে। সুতরাং মোবাইল ভিউতে আপনি পছন্দ মতো স্ক্রোলিংটি পান এবং বৃহত্তর দর্শনগুলিতে সারণীটি প্রতিক্রিয়াশীল নয় এবং এভাবে পছন্দ হিসাবে পূর্ণ প্রস্থ প্রদর্শিত হবে।

দস্তাবেজ: https://getbootstrap.com/docs/4.0/content/tables/#breakPoint-specific

Question 7

কাঠামোর v4 এর সাথে সামঞ্জস্যপূর্ণ সমাধানটি সঠিক ব্রেকপয়েন্টটি সেট করা set টেবিল-প্রতিক্রিয়াশীল ব্যবহার করার পরিবর্তে, আপনি .table-প্রতিক্রিয়াশীল-এসএম ব্যবহার করতে সক্ষম হবেন (ছোট ডিভাইসে কেবল প্রতিক্রিয়াশীল হতে)

আপনি যে কোনও উপলভ্য শেষবিন্দু ব্যবহার করতে পারেন: টেবিল-প্রতিক্রিয়াশীল {-sm | -md | -lg | -xl}

Question 8

এটি কারণ .table-responsiveশ্রেণিটি display: blockআপনার উপাদানটিতে সম্পত্তি যুক্ত করে যা পূর্বের থেকে এটি পরিবর্তন করেdisplay: table ।

display: tableআপনার নিজস্ব স্টাইলশীটে এই সম্পত্তিটিকে ওভাররাইড করুন

.table-responsive {
    display: table;
}

দ্রষ্টব্য: নিশ্চিত করুন যে এই স্টাইলটি ওভাররাইডের জন্য আপনার বুটস্ট্র্যাপ কোডের পরে কার্যকর করে।

Question 9

এটি table-responsiveক্লাসটি টেবিলকে একটি সম্পত্তি প্রদানের কারণে ঘটেছিল display:block, যা আশ্চর্যজনক কারণ এটি tableক্লাসগুলিকে মূল ওভাররাইট করে display:tableএবং এটি যুক্ত করার পরে টেবিলটি সঙ্কুচিত হয় table-responsive।

সম্ভবত এটি বুটস্ট্র্যাপ 4 এ ডাউন এখনও ডেভ রয়েছে। আপনি নিজের শ্রেণীর সাথে সেট করে এই সম্পত্তিটি ওভাররাইট করতে নিরাপদdisplay:table এবং এটি সারণীর প্রতিক্রিয়াটিকে প্রভাবিত করবে না।

যেমন

.table-responsive-fix{
   display:table;
}

Question 10

অন্যান্য উত্তরগুলি বিবেচনা করে আমি এই জাতীয় কিছু করব, ধন্যবাদ!

.table-responsive {
    @include media-breakpoint-up(md) {
        display: table;
    }
}

Question 11

.Table-প্রতিক্রিয়াশীল {-sm | -md | -lg | -xl with দিয়ে যেকোন .table মোড়ানো দ্বারা প্রতিক্রিয়াশীল টেবিলগুলি তৈরি করুন, 576px, 768px, পর্যন্ত প্রতিটি সর্বাধিক প্রস্থের ব্রেকআপপয়েন্টে টেবিলটি অনুভূমিকভাবে স্ক্রোল তৈরি করে, যথাক্রমে 992px এবং 1120px।

কেবল টেবিলটি .table- প্রতিক্রিয়াশীল s -sm | -md | -lg | -xl with দিয়ে মোড়ানো

উদাহরণ স্বরূপ

<div class="table-responsive-md">
    <table class="table">
    </table>
</div>

বুটস্ট্র্যাপ 4 টেবিল

Question 12

আমি দেখতে পেয়েছি যে একটি মোড়কে প্রস্তাবিত টেবিল-প্রতিক্রিয়াশীল বর্গ ব্যবহার করার ফলে এখনও প্রতিক্রিয়াশীল টেবিলগুলি (আশ্চর্যরূপে) অনুভূমিকভাবে সঙ্কুচিত হয়:

<div class="table-responsive-lg">
    <table class="table">
        ...
    </table>
</div>

আমার জন্য সমাধানটি হ'ল নিম্নলিখিত প্রতিরোধের জন্য মিডিয়া ব্রেকপয়েন্ট এবং ক্লাস তৈরি করা:

.table-xs {
    width:544px;
}

.table-sm {
    width: 576px;
}

.table-md {
    width: 768px;
}

.table-lg {
    width: 992px;
}

.table-xl {
    width: 1200px;
}

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 576px) {  
    .table-sm {
        width: 100%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .table-sm {
        width: 100%;
    }

    .table-md {
        width: 100%;
    }

    .table-lg {
        width: 100%;
    }

    .table-xl {
        width: 100%;
    }
}

তারপরে আমি আমার টেবিল উপাদানগুলিতে উপযুক্ত শ্রেণিটি যুক্ত করতে পারি। উদাহরণ স্বরূপ:

<div class="table-responsive-lg">
    <table class="table table-lg">
        ...
    </table>
</div>

এখানে মোড়কটি বুটস্ট্র্যাপের জন্য বৃহত্তর এবং বৃহত্তর জন্য 100% প্রস্থকে সেট করে। টেবিল-এলজি শ্রেণিটি টেবিলের উপাদানটিতে প্রয়োগ করা সারণীর সাথে প্রস্থটি বৃহত্তর এবং বৃহত্তর জন্য 100% সেট করা থাকে তবে মাঝারি ও ছোটটির জন্য 992px সেট করা হয়। ক্লাসগুলি টেবিল-এক্স, টেবিল-এসএম, টেবিল-এমডি এবং টেবিল-এক্সএল একইভাবে কাজ করে।

Question 13

বুটস্ট্র্যাপ 4.x এর জন্য ডিসপ্লে ইউটিলিটিগুলি ব্যবহার করুন:

w-100 d-print-block d-print-table

ব্যবহার :

<table class="table w-100 d-print-block d-print-table">

Question 14

দেখে মনে হচ্ছে টেবিলের অভ্যন্তরে "sr-only" উপাদান এবং এর শৈলীগুলি এই বাগটি সৃষ্টি করছে। কমপক্ষে আমারও একই সমস্যা ছিল এবং কয়েক মাস পরে আমাদের মাথা প্রাচীরের বিরুদ্ধে মাথা ঠাট্টা করার পরে আমরা এর কারণটি নির্ধারণ করেছি, যদিও আমি এখনও বুঝতে পারি না। যোগ করার পদ্ধতি left:0"SR-কেবল" শৈলীতে এটি সংশোধন করা হয়েছে।