ছোট ডিভাইসে টুইটার বুটস্ট্র্যাপ লুকান উপাদান


92

আমার এই কোডটি রয়েছে:

<footer class="row">
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 1</li>
      <li>Text 2</li>
      <li>Text 3</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 4</li>
      <li>Text 5</li>
      <li>Text 6</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 7</li>
      <li>Text 8</li>
      <li>Text 9</li>
    </ul>
  </nav>
  <nav class="col-sm-3">
    <ul class="list-unstyled">
      <li>Text 10</li>
      <li>Text 11</li>
      <li>Text 12</li>
    </ul>
  </nav>
</footer>

ভিতরে কিছু পাঠ্য সহ চারটি ব্লক। এগুলি প্রস্থে সমান, আমি col-sm-3তাদের সকলের জন্য সেট করেছি এবং আমি যা করতে চাই তা হ'ল navঅতিরিক্ত ছোট ডিভাইসে সর্বশেষটি লুকিয়ে রাখা । আমি ব্যবহার করার চেষ্টা করেছি hidden-xsযে nav, এটাকে লুকিয়ে রাখে, কিন্তু একই সময়ে আমি অন্য অবরোধের (থেকে পরিবর্তন বর্গ প্রসারিত করতে চান col-sm-3করতে col-sm-4) col-sm-4 X 3 = 12

কোন সমাধান?

উত্তর:


153

ছোট ডিভাইসে: 4 columns x 3 (= 12) ==> col-sm-3

অতিরিক্ত অতিরিক্ত: 3 columns x 4 (= 12) ==> col-xs-4

 <footer class="row">
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 1</li>
            <li>Text 2</li>
            <li>Text 3</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 4</li>
            <li>Text 5</li>
            <li>Text 6</li>
            </ul>
        </nav>
        <nav class="col-xs-4 col-sm-3">
            <ul class="list-unstyled">
            <li>Text 7</li>
            <li>Text 8</li>
            <li>Text 9</li>
            </ul>
        </nav>
        <nav class="hidden-xs col-sm-3">
            <ul class="list-unstyled">
            <li>Text 10</li>
            <li>Text 11</li>
            <li>Text 12</li>
            </ul>
        </nav>
    </footer>

আপনি যেমনটি বলেছেন, লুকানো-এক্সগুলি যথেষ্ট নয়, আপনাকে এক্স এবং এসএম ক্লাস একত্রিত করতে হবে।


উপলব্ধ প্রতিক্রিয়াশীল ক্লাস এবং গ্রিড সিস্টেম সম্পর্কে অফিসিয়াল ডকের লিঙ্কগুলি এখানে ।

মাথা আছে:

  • 1 সারি = 12 কলস
  • জন্য এক্স Tra এস মলের ডিভাইস : কর্নেল-XS -__
  • জন্য এস এম সমস্ত ডিভাইসের : কর্নেল-ছাঃ -__
  • জন্য এমডি ium ডিভাইস : কর্নেল মো -__
  • জন্য এল আরবী ভাষায় জি ই ডিভাইস : কর্নেল-এলজি -__
  • কেবল দৃশ্যমান করুন (অন্যের উপরে লুকানো): দৃশ্যমান-এমডি (কেবলমাত্র মাঝারি ক্ষেত্রে দৃশ্যমান [এলজি এক্স বা এসএম তে নয়)
  • কেবল লুকানো তৈরি করুন ( অন্যটিতে দৃশ্যমান): লুকানো- এক্স (এক্সট্রা স্মলটিতে কেবল লুকানো)

এটি প্রদর্শিত হয় যে বুটস্ট্র্যাপ 4-এ আপনাকে লুকানো-SIZE- (উপরে | নীচে) মাধ্যমে বুদবুদ নির্দিষ্ট করতে হবে। উদা: hidden-sm-down
ইভান সিরোকি

বুটস্ট্র্যাপ 2 এর জন্য, ক্লাসটি ব্যবহার করুনhidden-phone
কেটি

84

বুটস্ট্র্যাপ 4

প্রদর্শন (লুকানো / দৃশ্যমান) শ্রেণীর উপর লুকানোর জন্য বুটস্ট্র্যাপ 4. মধ্যে পরিবর্তিত হয় xsভিউপোর্ট ব্যবহার:

d-none d-sm-block

এছাড়াও দেখুন: বুটস্ট্র্যাপ ভি 4 এ দৃশ্যমান - ** এবং লুকানো - নিখোঁজ


বুটস্ট্র্যাপ 3 (মূল উত্তর)

hidden-xsইউটিলিটি ক্লাসটি ব্যবহার করুন ..

<nav class="col-sm-3 hidden-xs">
        <ul class="list-unstyled">
        <li>Text 10</li>
        <li>Text 11</li>
        <li>Text 12</li>
        </ul>
</nav>

http://bootply.com/90722


আমি এই শ্রেণিটি ব্যবহার করেছি তবে এটি সহায়ক ছিল না, তবে উদাহরণস্বরূপ আপনি অন্যান্য ন্যাভ্সে কিছু অন্যান্য ক্লাস যুক্ত করেছেন যা তাদের প্রদর্শন 25% থেকে 33% প্রশস্ত করে পরিবর্তন করেছে। ঐটা এটা ছিল! থেক্স
ক্রিসান রালুকা টিওডোরা

আপনাকে স্বাগতম, তবে আমি মিস করেছি যে আপনি ইতিমধ্যে আপনার উদাহরণে 'লুকানো-এক্সএস' ব্যবহার করে উল্লেখ করেছেন। @ Jahnux73 উত্তরের জন্য +1
জিম

23

বুটস্ট্র্যাপ ৫.০ এর জন্য একটি পরিবর্তন রয়েছে

দস্তাবেজগুলি দেখুন: https://getbootstrap.com/docs/4.0/utilities/display/

মোবাইলে সামগ্রীটি আড়াল করতে এবং বড় ডিভাইসগুলিতে প্রদর্শন করতে আপনাকে নিম্নলিখিত ক্লাসগুলি ব্যবহার করতে হবে:

d-none d-sm-block

প্রথম শ্রেণীর সেট সমস্ত ডিভাইসগুলির মধ্যে কিছুই প্রদর্শন করে না এবং দ্বিতীয়টি এটি "এসএম" আপ ডিভাইসগুলির জন্য প্রদর্শন করে না (যদি আপনি বিভিন্ন ডিভাইসে প্রদর্শন করতে চান তবে এসএম এর পরিবর্তে আপনি এমডি, এলজি ইত্যাদি ব্যবহার করতে পারেন)।

আমি অভিবাসনের আগে সে সম্পর্কে পড়ার পরামর্শ দিই:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities


12
<div class="small hidden-xs">
    Some Content Here
</div>

এটি গ্রিড / ছোট কলামে অগত্যা প্রয়োজনীয় উপাদানগুলির জন্যও কাজ করে। এটি যখন বড় স্ক্রিনে রেন্ডার করা হয় তখন ফন্টের আকারটি আপনার ডিফল্ট পাঠ্য ফন্টের আকারের চেয়ে ছোট হবে।

এই উত্তরটি ওপি শিরোনামে প্রশ্নটি সন্তুষ্ট করে (যা আমি এই প্রশ্নোত্তরটি পেয়েছি)।


এটি ভাল কাজ করে। আমি এটি একটি চিত্র লুকানোর জন্য ব্যবহার করেছি। <ডি ক্লাস = "ছোট লুকানো-এক্সস"> <a href=''link"> </a> </div>
অরিন্দম রায়চৌধুরী
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.