টুইটার বুটস্ট্র্যাপে পাঁচটি সমান কলাম

Question

আমি যে পৃষ্ঠাগুলিটি তৈরি করছি তার পাঁচটি সমান কলাম থাকতে চাই এবং 5 টি কলামের গ্রিডটি এখানে কীভাবে ব্যবহৃত হচ্ছে তা আমি বুঝতে পারি না: http://web.archive.org/web/20120416024539/http://domain7 .com / মোবাইল / সরঞ্জামগুলি চালু / বুটস্ট্র্যাপ / প্রতিক্রিয়াশীল

পাঁচটি কলাম গ্রিডটি কি টুইটার বুটস্ট্র্যাপ কাঠামোর অংশের উপরে প্রদর্শিত হচ্ছে?

Comments

আপনি বুটস্ট্র্যাপের একটি খুব পুরানো সংস্করণটি দেখছেন। আপনি কি (সর্বশেষ, আমি আশা করি) বুটস্ট্র্যাপে 5-কলামের "প্রতিক্রিয়াশীল" গ্রিডটি খুঁজছেন?

— Andres Ilich

আমি কেবল বুঝতে পেরেছি যে একটি বর্ণিত v1.3.0 এবং বর্তমানটি 2.0.2 2.0 অনেক কিছুই পরিবর্তন না করে ৫ টি সমান কলাম থাকা সম্ভব হবে।

— গ্যান্ডাল্ফ

আপনি, হ্যাঁ, তবে এটির জন্য গ্রিড উপাদানগুলির কয়েকটি এবং প্রতিক্রিয়াশীল গ্রিড উপাদানগুলিতে ভারী পরিবর্তন প্রয়োজন হবে। আপনার সাইট কি আদৌ প্রতিক্রিয়াশীল? এইভাবে উত্তরটি নিয়ে আসা কিছুটা সহজ হবে, অন্যথায় এটি অনেক কোড হবে।

— আন্দ্রেস ইলিচ

হ্যাঁ, সাইটটি প্রতিক্রিয়াশীল তবে গ্রিড উপাদানগুলিকে খুব সংশোধন করতে হবে তবে কেবল ইমোই প্রতিক্রিয়াশীল অংশ নয়।

— গ্যান্ডাল্ফ

আমি .container.one- পঞ্চম.ক্লম {প্রস্থ: 17% সহ কিছুটা সাফল্য পেয়েছি; } যদিও আমি আমার দমকে দূরে সরিয়ে নেওয়ার জন্য ভয়ঙ্কর কিছু আশা করছি .1

— গ্যান্ডাল্ফ

Answer 1

স্প্যান 2 শ্রেণীর সাথে পাঁচটি ডিভ ব্যবহার করুন এবং প্রথম শ্রেণিকে অফসেট 1 দিন।

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

ভাল খবর! পাঁচটি সমান দূরত্ব এবং কেন্দ্রিক কলাম।

---

বুটস্ট্র্যাপ 3.0.০ এ এই কোডটি দেখতে পাবেন

<div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

Comments

এটি পুরো প্রস্থে যায় না। এটা চমৎকার যদিও

— machineaddict

আমি পোস্ট করা সমাধানটি পুরো প্রস্থে যায় এবং 5 টি সমান কলাম তৈরি করে: উত্তর এখানে ।

— ফিজিক্স

@ ফিজিক্স নীচে প্রদত্ত উত্তরটির মতো পূর্ণ প্রস্থে যায় না। উভয় পক্ষের মতোই অবাঞ্ছিত মার্জিন তৈরি করে - jsfiddle.net/wdo8L1ww

— ফিজিক্স ২14

কলামগুলি এই সমাধানটির সাথে বরং ছোট দেখায়, তাই আমি @ ফিজিক্স সমাধানটি পছন্দ করি

— dc2009

বুটস্ট্র্যাপ 4 5 টি কলস (পূর্ণ-প্রস্থ) এর জন্য কোনও সিএসএস বা এসএএসএস প্রয়োজন নেই: stackoverflow.com/a/42226652/171456

— জিম

Answer 2

বুটস্ট্র্যাপ 3 এবং তারপরের জন্য

টুইটার বুটস্ট্র্যাপ সহ একটি দুর্দান্ত পূর্ণ প্রস্থ 5 কলাম লেআউটটি এখানে তৈরি করা হয়েছিল ।

এটি এখন পর্যন্ত সর্বাধিক উন্নত সমাধান যেহেতু এটি বুটস্ট্র্যাপ ৩ এর সাথে নির্বিঘ্নে কাজ করে responsive এটি প্রতিক্রিয়াশীল ডিজাইনের জন্য বর্তমান বুটস্ট্র্যাপ ক্লাসগুলির সাথে জুড়ে পুনরায় ব্যবহার করতে পারবেন the

সিএসএস:
এটি আপনার বিশ্বব্যাপী স্টাইলশিটে, এমনকি আপনার bootstrap.cssনথির নীচেও যুক্ত করুন।

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

এটি ব্যবহার করার জন্য রাখুন!
উদাহরণস্বরূপ, আপনি যদি এমন একটি ডিভি এলিমেন্ট তৈরি করতে চান যা মাঝারি স্ক্রিনে পাঁচটি কলাম লেআউটের মতো এবং ছোটগুলিতে দুটি কলামের মতো আচরণ করে, আপনার কেবল এই জাতীয় কিছু ব্যবহার করতে হবে:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

ওয়ার্কিং ডেমো - কলামগুলি প্রতিক্রিয়াশীল হওয়ার জন্য ফ্রেমটি প্রসারিত করুন।

অন্য ডেমো -col-*-5thsযেমনcol-*-3এবংঅন্যান্যদের সাথেনতুনক্লাস সংহত করাcol-*-2 । তাদের সমস্তcol-xs-6প্রতিক্রিয়াশীল ভিউতেপরিবর্তন দেখতে ফ্রেমের আকার পরিবর্তন করুন।

---

বুটস্ট্র্যাপ 4 এর জন্য

বুটস্ট্র্যাপ 4 এখন ডিফল্টরূপে ফ্লেক্সবক্স ব্যবহার করে, তাই আপনি বাক্সের বাইরে সরাসরি এর যাদুবিদ্যায় অ্যাক্সেস পান। পরীক্ষা করে দেখুন অটো বিন্যাস কলাম যে পরিবর্তনশীল কত কলাম নেস্টেড হয় উপর নির্ভর করে প্রস্থ সমন্বয়।

এখানে একটি উদাহরণ:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

ওয়ার্কিং ডেমো

Comments

তাদের কল col-*-15করা বিভ্রান্তিকর হতে পারে। মনে হয় তারা 15 কলামের গ্রিড সিস্টেমের অংশ, যা তারা তা নয়।

— পল ডি ওয়েট

@ পলডি.ওয়েট - আমি লোকদের জানাতে আমার উত্তরে একটি সামান্য নোট যুক্ত করেছি।

— ফিজিক্স

col-*-15আমার সাথে ঠিক আছে, তবে col-*-5thsকিছুটা কম বিভ্রান্তিকর কলামের নাম হতে পারে। এটিই আমি ব্যবহার করছি যাতে আমার অন্যান্য বিকাশকারীরা আমার কাছে বিভ্রান্ত না হয়।

— Mordred

আরে @scragar - আপনি যদি সমস্ত বুটস্ট্র্যাপের বর্তমান কলামের ক্লাসগুলির স্টাইলিংটি দেখতে পান তবে আপনি খেয়াল করবেন যে সেগুলিতে রয়েছে position:relative; min-height: 1px; padding-right: 15px; padding-left: 15px;। মূলত, আমি পোস্ট করা কোডটি কেবল এতে প্রসারিত হচ্ছে যাতে তারা বুটস্ট্র্যাপের স্টাইলিংয়ের সাথে একেবারে বিলম্বিত হয়। আমি এর পরে প্রস্থটি প্রযোজ্য 20%যাতে 5 টি সমান কলাম পৃষ্ঠায় জুড়ে যায়। খুব সাধারণ :)

— ফিজিক্স

2/5 কলামের নামকরণ সম্পর্কে কীভাবে? বা আমাদের ব্যবহার করা উচিত: 1/5 এর জন্য কল-এমডি -1 তম এবং 2/5 এর জন্য কোল-এমডি -2 তম, 5/5 = পূর্ণ প্রস্থের জন্য কল-এমডি-5 তম?

— অ্যালেক্স

Answer 3

জন্য বুটস্ট্র্যাপ 3 , যদি আপনি চান পূর্ণ- প্রস্থের এবং ব্যবহার করছেন LESS, SASSবা অনুরূপ কিছু, সব আপনাকে যা করতে হবে বানানো ব্যবহার বুটস্ট্র্যাপ এর mixin ফাংশন make-md-column , make-sm-columnইত্যাদি

কম:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

Sass:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

আপনি শুধু নির্মাণ করতে পারেন সত্য পূর্ণ- প্রস্থের বুটস্ট্র্যাপ কলাম শ্রেণীর এই mixins ব্যবহার করে, কিন্তু আপনার কাছে সব নির্মাণ করতে পারেন সংশ্লিষ্ট সাহায্যকারী শ্রেণীর মত .col-md-push-*, .col-md-pull-*এবং .col-md-offset-*:

কম:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

Sass:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

অন্যান্য উত্তরগুলি সেটিং সম্পর্কে কথা বলে @gridColumnsযা পুরোপুরি বৈধ, তবে এটি বুটস্ট্র্যাপের জন্য মূল কলামের প্রস্থকে পরিবর্তন করে। উপরের মিক্সিন ফাংশনগুলি ব্যবহার করে ডিফল্ট বুটস্ট্র্যাপ কলামগুলির উপরে 5 টি কলাম লেআউট যুক্ত হবে, সুতরাং এটি কোনও তৃতীয় পক্ষের সরঞ্জাম বা বিদ্যমান স্টাইলিং ভাঙ্গবে না।

Comments

সবচেয়ে পরিষ্কার সমাধান, 2.412 (5 2.4*5=12) এর 5 ম হিসাবে , 12-কলাম গ্রিডে বুটস্ট্র্যাপ 3 এর জন্য কাজ করে। এছাড়াও প্রযোজ্য make-xs, make-smকিন্তু (সর্বশেষ পান অগ্রাধিকার) অন্য মান কর্নেল সংজ্ঞায় বেশ মিলিত কাজ করবে না

— Sherbrow

আমি এই উত্তরের তুলনামূলকভাবে কয়েকটি আপভোকে স্তম্ভিত হয়েছি। এটি এখন পর্যন্ত ন্যূনতম হ্যাকি, অন্যান্য বুটস্ট্র্যাপ কলাম শ্রেণীর মতো একই নামকরণ কনভেনশনটি ব্যবহার করে না, তবে একই মিক্সিনগুলি বুটস্ট্র্যাপ তার নিজস্ব কলাম তৈরি করতে ব্যবহার করে এটি খুব কমপক্ষে বুটস্ট্র্যাপ 4 পর্যন্ত সম্ভবত ভবিষ্যতের প্রমাণ তৈরি করে।

— ক্রিস ফ্রিটজ

এটি সেরা উত্তর বলে মনে করা হচ্ছে। আমি একটি লাইব্রেরি তৈরি করেছেন (অন্তর্ভুক্ত করা offset, pullএবং pushআমার নিজস্ব ব্যবহারের জন্য) এই উপর ভিত্তি করে। এটি

— কেনি কি

সবাই যেমন বলেছে, হ্যাঁ এটি এখন সঠিক উত্তর। @ শেরব্রো বলেছিলেন যে তারা "অন্যান্য স্ট্যান্ডার্ড কোল সংজ্ঞাগুলির সাথে একত্রিত হয়ে কাজ করবে না" তবে এটি এই কারণ নয় যে এই সমাধানটি কোনওভাবেই ভুল, এর কারণ কেবল 12% 5! = 0.

— নিক এম

@ লাইটসুইচ05 দুর্ভাগ্যক্রমে এটি আমার পক্ষে উপযুক্ত ছিল না কারণ আমার গতিশীল পরিমাণে কলাম ছিল। যদি আমার কেবল একটি কলাম থাকে তবে আমি এটি পর্দার 5 তম হতে চাইতাম তবে ফিজিক্সের উত্তর ব্যবহার করে একটি কলাম পুরো পর্দাটি কভার করবে। আমি নতুন বুটস্ট্র্যাপ 4 মিক্সিন ফাংশনগুলি ব্যবহার করে এটি সমাধান করতে সক্ষম হয়েছি। আমি আপনার উত্তর আপডেট করতে পারে যদি এটি পছন্দ করতে চান?

— পলগ

Answer 4

2019 আপডেট করুন

বুটস্ট্র্যাপ 4.1+ +

এখানে অটো-লেআউট গ্রিড ব্যবহার করে 5 টি সমান, পূর্ণ-প্রস্থের কলাম ( অতিরিক্ত সিএসএস বা SASS নেই ) রয়েছে :

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://www.codeply.com/go/MJTglTsq9h

এই সমাধানটি কাজ করে কারণ বুটস্ট্র্যাপ 4 এখন ফ্লেক্সবক্স। আপনি 5 কলাম একই মধ্যে মোড়ানো পেতে পারেন .rowযেমন একটি বিরতি ব্যবহার <div class="col-12"></div>বা <div class="w-100"></div>প্রতি 5 টি কলাম।

আরও দেখুন: বুটস্ট্র্যাপ - 5 কলাম লেআউট

Comments

এটি স্থিতিশীল হওয়ার জন্য অপেক্ষা করতে পারে না :)

— নিকোলালিয়াস

ভাল তবে কেবল 5 টি উপাদানের সারি নিয়ে কাজ করে। বেশি পেলে ভুল হয়ে যায়। আমার বর্ধিত উচ্চারণ এখানে দেখুন: jsfiddle.net/djibe89/ntq8h910

— ডিজিবে

সে কারণেই আমি আপনাকে ব্যাখ্যা করেছি যে প্রতি 5 টি কলাম আপনাকে বিরতি ব্যবহার করতে হবে। আপনার সমাধানটি কাজ করে তবে অতিরিক্ত সিএসএস প্রয়োজন।

— জিম

এটিকে যুক্ত flex-nowrapকরার বিষয়টিও বিবেচনা .rowকরুন (যেহেতু (স্বয়ংক্রিয়) কলামগুলি প্যারেন্ট প্রস্থকে অতিক্রম করতে পারে।

— Luuk Skeur

Answer 5

নীচে @ মেশিনেডিক্টিক্স এবং @ মাফনাঃ জবাবগুলির একটি কম্বো দেওয়া আছে, যা বুটস্ট্র্যাপ 3 এর জন্য পুনরায় লিখিত হয়েছে (এখনও পর্যন্ত আমার পক্ষে ভালভাবে কাজ করছে):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

Comments

আমি এটি কোথায় রাখব এবং কীভাবে এটি ব্যবহার করব?

— সার্গের্গ

@Serg 1. এটি নীচের প্লেস / পরে বুটস্ট্র্যাপ CSS ফাইল 2. .row করার .fivecolumns বর্গ যোগ করুন, তারপর নীড় পাঁচটি বর্গ .col সঙ্গে কলাম [- SM, -lg] -2

— plaidcorp

কিছু ক্ষেত্রে নিখুঁত পূর্ণ প্রস্থে যায় না।

— ফিজিক্স

কল-এক্সএস -২ ঘোষণায় কেন যুক্ত করা হয়নি?

— ganders

@ গ্যান্ডারগুলি কেবল একটি দর্শনীয় বিষয়; : এই পৃষ্ঠায় অন্য উত্তর খুঁজে বার করো stackoverflow.com/questions/10387740/...

— plaidcorp

Answer 6

আসল বুটস্ট্র্যাপটি 12 টি কলাম সহ রাখুন, এটি কাস্টমাইজ করবেন না। মূল বুটস্ট্র্যাপ প্রতিক্রিয়াশীল CSS এর পরে আপনার কেবলমাত্র কিছু পরিবর্তন করতে হবে :

বুটস্ট্র্যাপ ২.৩.২ এর জন্য নিম্নলিখিত কোডটি পরীক্ষা করা হয়েছে:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

এবং এইচটিএমএল:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

দ্রষ্টব্য: যদিও স্প্যান 2 বার 5 টি 12 কলামের সমান নয়, আপনি ধারণাটি পাবেন :)

একটি কার্যকারী উদাহরণ এখানে পাওয়া যাবে http://jsfiddle.net/v3Uy5/6/

Answer 7

যদি আপনার কলামগুলির ঠিক একই প্রস্থের প্রয়োজন না হয় তবে আপনি নেস্টিং ব্যবহার করে 5-কলাম তৈরি করতে চেষ্টা করতে পারেন:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

প্রথম দুটি কলামের প্রস্থ 5/12 * 1/2 ~ 20.83% সমান হবে

শেষ তিনটি কলাম: 7/12 * 1/3 ~ 19.44%

এই জাতীয় হ্যাক অনেক ক্ষেত্রে গ্রহণযোগ্য ফলাফল দেয় এবং কোনও সিএসএস পরিবর্তন প্রয়োজন হয় না (আমরা কেবল নেটিভ বুটস্ট্র্যাপ ক্লাস ব্যবহার করছি)।

Answer 8

5 কলাম লেআউটের জন্য একটি কাস্টম বুটস্ট্র্যাপ ডাউনলোড করুন

যান বুটস্ট্র্যাপ 2.3.2 (অথবা বুটস্ট্র্যাপ 3 ) স্বনির্ধারণ পৃষ্ঠা এবং নিম্নলিখিত যেকোনো একটি ভেরিয়েবল (ইনপুট না সেমিকোলন না) সেট করুন:

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

আপনার বিল্ড ডাউনলোড করুন। এই গ্রিডটি ডিফল্ট কনটেইনারগুলির সাথে ফিট হয়ে যাবে, ডিফল্ট গটার প্রস্থ (প্রায়) সংরক্ষণ করে।

দ্রষ্টব্য: আপনি যদি কম ব্যবহার করেন তবে variables.lessপরিবর্তে আপডেট করুন।

Answer 9

ফ্লেক্সবক্সের সাথে http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}

<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

Comments

আপনার প্রয়োজন অনুসারে যদি ফ্লেক্সবক্সটি বুটস্ট্র্যাপের চেয়ে ভাল।

— ml242

Answer 10

আমি মাফ্নাহর জবাবটি দিয়েছি, তবে এ দিকে তাকিয়ে আবার পরামর্শ দিচ্ছি যদি আপনি ডিফল্ট মার্জিন রাখেন তবে নিম্নলিখিতগুলি আরও ভাল হয় is

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

Comments

প্রকৃত প্রস্থটি 17.94872% এবং এটি প্রতিক্রিয়াশীল নয়, আপনাকে সমস্ত @ মিডিয়া ক্যোয়ারিতে প্রতিটি কলামের জন্য একটি নতুন মার্জিন সেট করতে হবে।

— machineaddict

Answer 11

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 20%;
}

Comments

এটি। সমকালীন। স্প্যান 2 {প্রস্থ: 20% হওয়া উচিত; }

— স্টুডিও 4

... এবং এটি কাজ করছে না। প্রথম কলাম বাদে প্রতিটি কলামের মার্জিন বাকি।

— মেশিনাডিক্ট

Answer 12

কল-এসএম -2 ক্লাসের সাথে 5 টি উপাদান তৈরি করুন এবং প্রথম উপাদানটিতে কোল-স্ম-অফসেট -1 ক্লাস যুক্ত করুন

পিএস এটির প্রস্থ পুরোপুরি হবে না (এটি স্ক্রিনের ডান এবং বাম থেকে সামান্য যুক্ত হবে)

কোডটির মতো দেখতে কিছু হওয়া উচিত

<div class="col-sm-2 col-sm-offset-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>
<div class="col-sm-2"></div>

Answer 13

বুটস্ট্র্যাপ 4, প্রতি সারি কলামের পরিবর্তনশীল সংখ্যা

আপনি যদি সারিতে প্রতি পাঁচটি পর্যন্ত কলাম রাখতে চান , যাতে কম সংখ্যক কলাম এখনও প্রতিটি সারির 1/5 তম গ্রহণ করতে পারে, তবে সমাধানটি বুটস্ট্র্যাপ 4 এর মিক্সিনগুলি ব্যবহার করা হবে :

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

এইচটিএমএল:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

Answer 14

বুটস্ট্র্যাপ 3 এ 5 টি কলাম সক্ষম করার আরেকটি উপায় হ'ল 12 কলামগুলির বিন্যাসটি বুটস্ট্র্যাপ দ্বারা ডিফল্টরূপে ব্যবহৃত হয় mod এবং তারপরে একটি 20 কলামের গ্রিড তৈরি করুন (বুটস্ট্র্যাপ ওয়েবসাইটে কাস্টমাইজ ব্যবহার করুন বা কম / SASS সংস্করণ ব্যবহার করুন)।

বুটস্ট্র্যাপ ওয়েবসাইটে কাস্টমাইজ করতে এখানে যান কাস্টমাইজ ও ডাউনলোডঃ পৃষ্ঠা, আপডেট পরিবর্তনশীল @grid-columnsথেকে 12থেকে 20। তারপরে আপনি 4 টি পাশাপাশি 5 টি কলাম তৈরি করতে সক্ষম হবেন।

Answer 15

এটি নেস্টিং এবং সামান্য সিএসএস ওভার রাইড ব্যবহার করে করা যেতে পারে।

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>​<!-- end outer row -->

তারপর কিছু সিএসএস

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

এখানে একটি উদাহরণ: 5 টি সমান কলামের উদাহরণ

এবং এখানে কোডারওয়ালে আমার সম্পূর্ণ লেখা আছে

বুটস্ট্র্যাপ 3 এ পাঁচটি সমান কলাম

Answer 16

আমার মতে কম সিনট্যাক্সের সাথে এটি ব্যবহার করা ভাল। এই উত্তরটি উপর ভিত্তি করে তৈরি উত্তর @ ফিজিক্সের

এইভাবে কলামগুলি ভেরিয়েবলগুলি (@ গ্রিড-গটার প্রস্থ, মিডিয়া ব্রেকপয়েন্টস) ব্যবহার করে যা ব্যবহারকারীর ওভাররাইড হয়ে থাকতে পারে এবং 12 টি কলাম গ্রিডের আচরণের সাথে পাঁচটি কলামের আচরণ মেলে।

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */

Answer 17

এটি দুর্দান্ত http : //

শুধু কর:

<div class="col-xs-2 col-xs-15">

এবং সিএসএস:

.col-xs-15{
    width:20%;
}

Answer 18

ডিফল্টরূপে বুটস্ট্র্যাপ গ্রিড সিস্টেম সরবরাহ করে না যা আমাদের পাঁচটি কলাম লেআউট তৈরি করতে দেয়, আপনার সিএসএস ফাইলে বুটস্ট্র্যাপ যেভাবে কিছু কাস্টম ক্লাস এবং মিডিয়া কোয়েরি তৈরি করতে পারে সেভাবে আপনাকে ডিফল্ট কলাম সংজ্ঞা তৈরি করতে হবে you

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

এবং কিছু এইচটিএমএল কোড

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Answer 19

ডিফল্টরূপে বুটস্ট্র্যাপ 12 কলাম পর্যন্ত স্কেল করতে পারে? এর অর্থ যদি আমরা সমান প্রস্থের 12-কলামের বিন্যাস তৈরি করতে চাই, তবে আমরা দ্বি শ্রেণিতে = "কল-এমডি -1" বারো বার লিখব।

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

Answer 20

টুইটার বুটস্ট্র্যাপ শৈলীর সাথে 5 টি কলাম লেআউট

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}

Answer 21

এমন একটি সমাধানের জন্য যাতে প্রচুর সিএসএস প্রয়োজন হয় না বা বুটস্ট্র্যাপের ডিফল্ট 12col লেআউটে টুইট করা যায় না:

http://jsfiddle.net/0ufdyeur/1/

এইচটিএমএল:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

সিএসএস:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

Answer 22

প্রয়োজন অনুযায়ী প্রতিটি মিডিয়া ক্যোয়ারী অনুসারে কেবল একটি নতুন শ্রেণী তৈরি করুন এবং তার আচরণটি সংজ্ঞায়িত করুন

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

এখানে একটি কার্যরত ডেমো https://codepen.io/giorgosk/pen/BRVorW

Answer 23

বামস্ট্রেপ 3-এ, আমি মনে করি বাম এবং ডান মার্জিন অপসারণের জন্য আমরা এর মতো কিছু করতে পারি:

<div class="row this_row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

এবং সিএসএস

.this_row {
    margin: 0 -5%;
}

Answer 24

আপনি কীভাবে বুটস্ট্র্যাপে 5 টি কলাম গ্রিড যুক্ত করতে পারেন

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }

<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Answer 25

সিএসএস সম্পাদনা করার প্রয়োজন ছাড়াই সবচেয়ে সহজ সমাধান হ'ল:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

এবং যদি আপনার যে কোনও ব্রেকপয়েন্টের বাইরে যাওয়ার প্রয়োজন হয়, কেবল বিটিএন-গ্রুপ ব্লক তৈরি করুন। আশা করি এটি কাউকে সাহায্য করবে।

Answer 26

পাঁচটি কলাম স্পষ্টভাবে ডিজাইন দ্বারা বুটস্ট্র্যাপের অংশ নয়।

তবে বুটস্ট্র্যাপ ভি 4 (আলফা) এর সাহায্যে জটিল গ্রিড বিন্যাসে সাহায্য করার জন্য 2 টি জিনিস রয়েছে

1. ফ্লেক্স ( http://v4-alpha.getbootstrap.com/getting-started/flexbox/ ), নতুন উপাদান টাইপ (অফিসিয়াল - https://www.w3.org/TR/css-flexbox-1/ )
2. প্রতিক্রিয়াশীল ইউটিলিটিস ( http://v4-alpha.getbootstrap.com/layout/responsive-utilities/ )

সহজ শব্দে, আমি ব্যবহার করছি

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

এটি 5,7,9,11,13 বা কিছু অসুবিধা হোক না কেন, ঠিক আছে। আমি নিশ্চিত যে 12-গ্রিড মান ব্যবহারের 90% এরও বেশি ক্ষেত্রে পরিবেশন করতে সক্ষম - তাই আসুন সেইভাবে ডিজাইন করুন - আরও সহজ বিকাশ করুন!

চমৎকার ফ্লেক্স টিউটোরিয়ালটি এখানে রয়েছে " https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Answer 27

আমি যে কোনও কলামের জন্য বুটস্ট্র্যাপ সংজ্ঞা উপর ভিত্তি করে SASS মিক্সিন সংজ্ঞা তৈরি করেছি (ব্যক্তিগতভাবে আমি 12, 8 এবং 10 এবং 24 ব্যবহার করি):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


@mixin calc-extended-grid-column($index, $num-columns, $class, $type) {
    @if ($type == width) and ($index > 0) {
        .col-#{$class}-#{$index}-#{$num-columns} {
            width: percentage(($index / $num-columns));
        }
    }
    @if ($type == push) and ($index > 0) {
        .col-#{$class}-push-#{$index}-#{$num-columns} {
            left: percentage(($index / $num-columns));
        }
    }
    @if ($type == pull) and ($index > 0) {
        .col-#{$class}-pull-#{$index}-#{$num-columns} {
            right: percentage(($index / $num-columns));
        }
    }
    @if ($type == offset) and ($index > 0) {
        .col-#{$class}-offset-#{$index}-#{$num-columns} {
            margin-left: percentage(($index / $num-columns));
        }
    }
}

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

এবং আপনি কেবল এর মাধ্যমে ক্লাস তৈরি করতে পারেন:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

আমি আশা করি যে কেউ এটি দরকারী হবে

Answer 28

কেউ কি বুটস্ট্র্যাপ-সাস (ভি 3) ব্যবহার করছেন, বুটস্ট্র্যাপ মিশ্রণগুলি ব্যবহার করে এখানে 5 টি কলামের জন্য সহজ কোড রয়েছে:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

আপনি অন্তর্ভুক্ত করেছেন তা নিশ্চিত করুন:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Comments

ধন্যবাদ, আমি যা খুঁজছিলাম এটি ছিল, আমি এখন আরও 1-10-2 2-5 ইত্যাদি তৈরি করেছি এবং 3-10-এরও বেশি ইত্যাদি তৈরি করেছি, আরও নমনীয়তা পেতে, খুব সুবিধাজনক

— morksinaanab

Answer 29

বুটস্ট্র্যাপ 4.4+ এর জন্য

ব্র্যান্ড নতুন row-cols-nক্লাস ব্যবহার করুন ।

1. row-cols-5আপনার বিভাগে ক্লাস যুক্ত করুন .row। কোন কাস্টম সিএসএস প্রয়োজন।
2. সারি-কলসের জন্য এখানে 4.4 ডকটি দেখুন: https://getbootstrap.com/docs/4.4/layout/grid/#row-colums

বুটস্ট্র্যাপ ৪.৪ এর পূর্বে বুটস্ট্র্যাপ ৪ সংস্করণের জন্য

1. সিএসএস নীচে অনুলিপি করুন (বুটস্ট্র্যাপ লেখকদের দ্বারা দুর্দান্ত সিএসএস) এবং এটি আপনার প্রকল্পে যুক্ত করুন

2. এটি সঠিকভাবে ব্যবহারের জন্য উপরোক্ত দস্তাবেজগুলি পড়ুন।

   .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

Answer 30

.col-xs-2-4 {
  position: relative;
  float: left;
  width: 20%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.col-sm-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .col-sm-2-4 {
    float: left;
    width: 20%;
  }
}
.col-md-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 992px) {
  .col-md-2-4 {
    float: left;
    width: 20%;
  }
}
.col-lg-2-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .col-lg-2-4 {
    float: left;
    width: 20%;
  }
}