`কল-এক্সএস- * Boot বুটস্ট্র্যাপ 4 এ কাজ করছে না

168

এর আগে আমি এর মুখোমুখি হই নি এবং সমাধানটি সন্ধান করার জন্য আমার খুব কষ্ট হচ্ছে। বুটস্ট্র্যাপে মাঝারি সমান কলাম থাকার সময়:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

পাঠ্য-প্রান্তিককরণ সূক্ষ্মভাবে কাজ করে:

কিন্তু কলামটি এর মতো অতিরিক্ত ছোট সমান করার সময়:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

তারপরে পাঠ্য-সারিবদ্ধকরণ আর কাজ করে না:

এমন কিছু বুটস্ট্র্যাপ ধারণা আছে যা আমি বুঝতে পারছি না বা এটি আসলে আমার যেমন মনে হয় ত্রুটি এটি। আমার পাঠ্যটি কখনই xs এর সাথে সর্বদা সারিবদ্ধ ছিল বলে আমি এই সমস্যাটি পাই নি। কোন সাহায্যের ব্যাপকভাবে প্রশংসা হবে। আমার সম্পূর্ণ কোডটি এখানে:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

— YoungCoder
সূত্র

7

col-xs-*আপনি সর্বশেষতম ভি 4 রিলিজে আর উপস্থিত নেই তাই আপনি এটি দেখছেন। col-xs-12আপনার মত 100% একটি প্রস্থ সেট করা নেই col-md-12। DevTools চেক সবকিছু দেখতে এবং এই দেখতে টানুন

— vanburen

435

col-xs-*এর পক্ষে বুটস্ট্র্যাপ ৪ এ বাদ দেওয়া হয়েছে col-*।

প্রতিস্থাপন col-xs-12সঙ্গে col-12এবং এটি আশানুরূপ কাজ হবে।

এছাড়াও নোটটি v4 col-xs-offset-{n}দ্বারা প্রতিস্থাপন করা offset-{n}হয়েছিল।

— তাও
সূত্র

8

এমনকি কখনও চিন্তা / এই সম্পর্কে জানা হবে না! তোমাকে অনেক ধন্যবাদ.

— ইয়ংকোডার

12

সর্বদা ডক্স পরীক্ষা করুন । শুভ কোডিং! ::} <(((*) ::

— তাও

8

এটি এমন কিছু নয় যা আপনি সাধারণত ডক্স পরীক্ষা করে দেখেন। আমি সমস্ত দস্তাবেজগুলিতে ছিলাম এবং এটিও মিস করেছি। আমি ভেবেছিলাম, এখন দুটি বিএস 4 সাইট মাইগ্রেশন এখন, সেই কর্নালটি জেনেরিকের জন্য ছিল, এবং কর্ন-এক্স সুনির্দিষ্ট হবে, তবে অনড় দৃষ্টিতে এটি কোনও অর্থহীন নয়, কারণ প্রথম মোবাইল, এক্স এবং আপ হওয়া জেনেরিক (ডিফল্ট)। অনুস্মারকটির জন্য ধন্যবাদ, আমি মনে করি আমি আমার শেষ মাইগ্রেশন চলাকালীন সময়ে এটিকে ফাঁকি দিয়েছিলাম, কিন্তু এই বিষয়ে আটকে ছিলাম।

— ব্লেম

1

আন্ড্রেই যদিও একটি জিনিস; এটি কি কেবল "এক্সএস" বাদ পড়েছে, নাকি অন্যরাও আছেন?

— ফানকি চল্লিশ নিনার 3'18

2

V3 এবং v4 এর মধ্যে কী পরিবর্তন হয়েছে সে সম্পর্কে দয়া করে এই উত্তরটি পড়ুন ) এবং একটি সরঞ্জামের একটি লিঙ্কও কি আপনার সে পথে যাওয়ার সিদ্ধান্ত নেওয়া উচিত। এটি কোনও সহজ কাজ নয় এবং আইএমএইচও এটি পরিষ্কার টেম্পলেটটিতে কাজ করা সহজ এবং মার্কআপ পরিবর্তনের চেয়ে পিএইচপি সন্নিবেশ করা সহজ।

— টাও

21

আমি কেবল ভাবলাম, কেন col-xs-6আমার পক্ষে কাজ করল না তবে আমি উত্তরটি বুটস্ট্র্যাপ 4 ডকুমেন্টেশনে পেয়েছি। অতিরিক্ত ছোট ডিভাইসের জন্য বর্গ উপসর্গটি এখন col-আগের সংস্করণগুলিতে ছিল col-xs।

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

বুটস্ট্র্যাপ 4 সমস্ত col-xs-*ক্লাস ফেলেছে , তাই col-*পরিবর্তে ব্যবহার করুন। উদাহরণস্বরূপ col-xs-6প্রতিস্থাপন col-6।

— সাবির হুসেন
সূত্র

2

আপনি এটি করতে পারতেন, আপনি যদি পুরানো বাক্য গঠন ব্যবহার করতে চান (বা প্রতিটি টেমপ্লেট পুনরায় লিখতে চান না)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

— wiwolavida
সূত্র

2

তারা এক্সএস বাদ দিয়েছে কারণ বুটস্ট্র্যাপটিকে মোবাইল-প্রথম বিকাশের সরঞ্জাম হিসাবে বিবেচনা করা হয়। এটি ডিফল্টকে xs হিসাবে বিবেচনা করা হয় এবং তাই সংজ্ঞায়িত করার দরকার নেই।

— SMWalker
সূত্র

1

ইন বুটস্ট্র্যাপ 4.3 , কর্নেল-xs- {মান} col- {মান} দ্বারা প্রতিস্থাপিত হয়

এসএম, এমডি, এলজি, এক্সএল-তে কোনও পরিবর্তন নেই ।

.col- {মান}
.col-sm- {value}
.col-md- {value}
.col-lg- {value}
.col-xl- {value

— দোরজি কর্ম ma
সূত্র

-1

বুটস্ট্র্যাপ 4 গ্রিড কল-এক্স-এক্স-ক্লাস।

বুটস্ট্র্যাপে 4 টি গ্রিড ক্লাস বিভিন্ন ভিউ বা একই জন্য আলাদা।

আপনি .col-xs- * ক্লাস ব্যবহার করতে চান।

সুতরাং, এই শ্রেণিটি মোবাইল দর্শনের জন্য কাজ করছে।

পার্থক্যটি দেখতে আপনি নীচের এই কোডটি চেষ্টা করে দেখতে পারেন এবং পার্থক্যটি দেখতে পারেন। তারপরে, এই কোডটি আপনার কোডটিতে ব্যবহার করুন।

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-sm-4 col-xs-12">Hello!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hi!</div>
    <div class="col-lg-4 col-sm-4 col-xs-12">Hey!</div>
  </div>
</div>

— ভর্তি পরমার
সূত্র

কর্নেল-XS বুটস্ট্র্যাপ 4 অবনমিত হয়েছে

— Wariored

দয়া করে, এটির লিঙ্কটি একবার দেখুন: bitdegree.org/learn/… *% 20 ইন% 20 আপনার% 20 কোড।

— ভারতী পরমার