আমি কি বুটস্ট্র্যাপে কল-এমডি -২.৫ দিতে পারি?

Question

আমি টুইটার বোস্টস্ট্র্যাপে কলামগুলি সামঞ্জস্য করতে চাই।

আমি জানি বুটস্ট্র্যাপে 12 টি কলাম গ্রিড রয়েছে। গ্রিডগুলিতে 3 3 3 3 এর পরিবর্তে 1.5 3.5 3.5 3.5 ব্যবহার করার কোনও উপায় আছে কি?

Comments

@ বোডি0 যেমনটি সঠিকভাবে বলেছে, এটি সম্ভব নয়। আপনি বুটস্ট্র্যাপের গ্রিড সিস্টেমকে সীমাবদ্ধ করতে হবে (আপনি বিভিন্ন সমাধান সন্ধান করতে এবং খুঁজে পেতে পারেন) বা নেস্টেড সারিগুলি যেমন বুটপ্লাই.ডে / ডিডি 50he9tGe ব্যবহার করতে পারেন । নেস্টেড সারিগুলির ক্ষেত্রে আপনি সর্বদা সঠিক ফলাফলটি নাও পেতে পারেন তবে একই রকম।

— তাসোস কে।

@ টাসোসকে। আপনার উদাহরণ আমার জন্য কাজ করেছেন আপনি উত্তরটিতে এটি লিখতে পারেন আমি তা গ্রহণ করব। আপনাকে ধন্যবাদ

— সন্ধ্যা গোর

এটি দুর্দান্ত, আমি একটি উত্তর পোস্ট করেছি

— তাসোস কে।

- V4 ব্যবহার করলে, এই খুঁজে বার করো stackoverflow.com/a/46838552/4050261

— আদর্শ Madrecha

Answer 1

হিসাবে @ bodi0 সঠিকভাবে বলেন , এটা সম্ভব নয়। আপনি বুটস্ট্র্যাপের গ্রিড সিস্টেমকে সীমাবদ্ধ করতে হবে (আপনি বিভিন্ন সমাধান সন্ধান করতে এবং খুঁজে পেতে পারেন, এখানে একটি 7-কলামের উদাহরণ দেওয়া আছে) বা নেস্টেড সারিগুলি যেমন http://bootply.com/dd50he9tGe ব্যবহার করুন ।

নেস্টেড সারিগুলির ক্ষেত্রে আপনি সর্বদা সঠিক ফলাফলটি নাও পেতে পারেন তবে একই রকম

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Answer 2

আপনি মেঘও সহজেই কলামের প্রস্থকে ওভাররাইড করে ...

<div class="col-md-1" style="width: 12.499999995%"></div>

যেহেতু col-md-1প্রস্থ 8.33333333%; কেবল 8.33333333 * 1.5 কে গুন করুন এবং এটিকে আপনার প্রস্থ হিসাবে সেট করুন।

ইন bootstrap 4, আপনাকে ফ্লেক্স এবং সর্বোচ্চ-প্রস্থের সম্পত্তিও ওভাররাইড করতে হবে:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Comments

উজ্জ্বল দুর্দান্ত কাজ করে, আমাকে ঘন্টা বাঁচায়। এখনও তার প্রতিক্রিয়া বজায় রাখে

— Defcde

তবে ml-sm-autoশ্রেণি এখনও এই কাস্টম প্রস্থের মানটিকে উপেক্ষা করবে: / (সুতরাং পৃষ্ঠার দায়বদ্ধতা ভেঙে যাবে)

— মুফ্লিক্স

দুর্দান্ত, তবে কেন আপনি কেবল 12.5 ব্যবহার করেন নি, কারণ এটিই আসল সঠিক ফলাফল? :)

— এন্ড্রু

Answer 3

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

যথাযথ প্রান্তিককরণ এবং প্যাডিংয়ের জন্য সারিগুলি অবশ্যই একটি .container(নির্দিষ্ট-প্রস্থ) বা .container-fluid(পূর্ণ-প্রস্থ) এর মধ্যে স্থাপন করতে হবে ।

• কলামগুলির অনুভূমিক দলগুলি তৈরি করতে সারি ব্যবহার করুন।
• সামগ্রীগুলি কলামগুলির মধ্যে রাখা উচিত এবং কেবল কলামগুলি সারিগুলির অবিলম্বে শিশু হতে পারে।
• পূর্বনির্ধারিত গ্রিড শ্রেণীর মতো .rowএবং .col-xs-4দ্রুত গ্রিড লেআউট তৈরির জন্য উপলব্ধ। কম মিশিনগুলি আরও শব্দার্থক লেআউটগুলির জন্যও ব্যবহার করা যেতে পারে।
• কলামগুলি প্যাডিংয়ের মাধ্যমে গিটারগুলি (কলামের সামগ্রীর মধ্যে ফাঁক) তৈরি করে। সেই প্যাডিংটি প্রথম এবং শেষ কলামে নেতিবাচক মার্জিনের মাধ্যমে সারিগুলিতে অফসেট .rows।
• গ্রিড কলামগুলি আপনার বিস্তৃত হতে চান এমন বারোটি উপলব্ধ কলামের সংখ্যা নির্দিষ্ট করে তৈরি করা হয়। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি ব্যবহার করবে .col-xs-4।
• যদি 12 টিরও বেশি কলাম একটি একক সারিতে রাখা হয়, অতিরিক্ত কলামগুলির প্রতিটি গ্রুপ এক ইউনিট হিসাবে একটি নতুন লাইনে আবৃত করবে।
• গ্রিড ক্লাসগুলি ব্রেকপয়েন্টের আকারের চেয়ে বড় বা সমান স্ক্রীন প্রস্থ সহ ডিভাইসগুলিতে প্রযোজ্য এবং ছোট ডিভাইসগুলিতে লক্ষ্যযুক্ত গ্রিড শ্রেণিগুলিকে ওভাররাইড করে। অতএব, উদাহরণস্বরূপ .col-md-*কোনও উপাদানকে কোনও শ্রেণি প্রয়োগ করা কেবলমাত্র তার স্টাইলিংকে মাঝারি ডিভাইসগুলিতে প্রভাব ফেলবে না তবে কোনও .col-lg-*ক্লাস উপস্থিত না থাকলে বড় ডিভাইসেও লাগবে ।

আপনার সমস্যার সম্ভাব্য সমাধান হ'ল কাঙ্ক্ষিত প্রস্থ সহ আপনার নিজস্ব সিএসএস শ্রেণি সংজ্ঞায়িত করা যাক, আসুন এখন .col-half{width:XXXem !important}আসল বুটস্ট্র্যাপ সিএসএস ক্লাসের সাথে আপনার পছন্দের উপাদানগুলিতে এই শ্রেণিটি যুক্ত করুন।

Answer 4

বুটস্ট্র্যাপ 4 টি ফ্লেক্স-বক্স ব্যবহার করে এবং আপনি নিজের কলাম সংজ্ঞা তৈরি করতে পারেন

এটি একটি 1.5 এর কাছাকাছি, আপনার নিজের প্রয়োজনের জন্য টুইট।

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Answer 5

প্রস্থটি ওভাররাইট করতে নতুন ক্লাস তৈরি করুন। কাজের কোডের জন্য jFizz দেখুন ।

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Answer 6

অন্যরা যেমন বুটস্ট্র্যাপ 3 তে উল্লিখিত হয়েছে, আপনি নীড় / এম্বেড কৌশল ব্যবহার করতে পারেন।

তবে এটি এখন বুটস্ট্র্যাপ 4 থেকে চমত্কার দুর্দান্ত বৈশিষ্ট্যটি ব্যবহার করা আরও স্পষ্ট হয়ে উঠছে। আপনার কপিরাইটের প্রাকৃতিক প্রস্থের ভিত্তিতে স্বয়ংক্রিয়ভাবে কলামগুলি স্বয়ংক্রিয়ভাবে বানাতে col-{breakpoint}-autoক্লাসগুলি ব্যবহার করার বিকল্প রয়েছে (উদাহরণস্বরূপ col-md-auto)। উদাহরণস্বরূপ এটি পরীক্ষা করুন

Answer 7

রেক্স ব্লুম প্রতিক্রিয়া অনুসারে আমি একটি বুটস্ট্র্যাপ সহায়ক লিখেছি:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Answer 8

বুটস্ট্র্যাপের কলাম অফসেট রয়েছে, সুতরাং আপনি যদি আকার নির্দিষ্ট না করেই সমান প্রস্থের কলামগুলি চান তবে এটি ব্যবহার করুন।

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

এছাড়াও এই লিঙ্কটি দেখুন https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpPoint

Answer 9

এটি কল-এমডি -৫.৫ দেওয়ার জন্য বুটস্ট্র্যাপ স্ট্যান্ডার্ড নয় এবং আপনি বুটস্ট্র্যাপ.মিন.সিএসএস সম্পাদনা করতে পারবেন না কারণ সঠিক উপায় নয়। আপনি এই http://www.bootply.com/125259 এর মতো তৈরি করতে পারেন

Answer 10

আপনি এই কোডটি কল-এমডি -3, কল-এমডি -9 এর মধ্যে ব্যবহার করতে পারেন

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Answer 11

এই প্রশ্নটি বেশ পুরানো, তবে আমি সেভাবেই তৈরি করেছি (টিওয়াইপিও 3)।

প্রথমত, আমি একটি নিজস্ব অ্যাক্সেসযোগ্য সিএসএস-ক্লাস তৈরি করেছি যা আমি প্রতিটি সামগ্রী উপাদানটিতে ম্যানুয়ালি চয়ন করতে পারি।

তারপরে, আমি 11 টি কলাম (1 - 9 - 1) দিয়ে একটি বহিরাগত তিনটি কলাম উপাদান তৈরি করেছি, শেষ পর্যন্ত, আমি CSS এবং প্রথম তৃতীয় কলামের কলাম প্রস্থকে 12.499999995% এ পরিবর্তন করেছি।