বুটস্ট্র্যাপ 3 - সারির শ্রেণি কেন তার ধারকের চেয়ে প্রশস্ত?


116

আমি সবেমাত্র বুটস্ট্র্যাপ 3 ব্যবহার শুরু করেছি, সারি শ্রেণি কীভাবে কাজ করে তা বুঝতে আমার একটি সমস্যা হচ্ছে। একটি উপায় আছে এড়ানো হয় padding-leftএবং padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/


@ অ্যাড্রিফ্ট এখনও সত্য? আমি নিশ্চিত না যে আপনি যদি বোঝাতে চেয়েছেন যে তারা সঠিকভাবে কাজ করে না, কারণ আমি সেগুলি ব্যবহার করেছি এবং তারা মনে করে যে তাদের কাজ করা উচিত।
সিরিয়াল

1
@ সেরিয়াল: আর নেই। ছিল যোগ v3.0.2 মধ্যে
ভাসিতে ভাসিতে

3
কারণ বুটস্ট্র্যাপ সারিতে -15px বাম এবং ডান মার্জিন রয়েছে।

সম্ভবত আপনার সমস্যা নয় তবে অন্য কারও জন্য একই ধরণের সমস্যা রয়েছে: আপনার ডিভগুলিতে কেবলমাত্র একটি শ্রেণির বৈশিষ্ট্য রয়েছে তা নিশ্চিত করুন। আমি দুর্ঘটনাক্রমে তাদের দ্বিগুণ করেছি এবং এই একই সমস্যা পেয়েছি।
দ্য ওয়ান ট্রু কল্টার

উত্তর:


151

সমস্ত গ্রিড সিস্টেমগুলিতে, প্রতিটি কলামের মধ্যে নালী রয়েছে। বুটস্ট্র্যাপের সিস্টেমটি এই নর্দমাটি তৈরি করতে প্রতিটি কলামের বাম এবং ডানদিকে একটি 15px প্যাডিং সেট করে।

সমস্যাটি হ'ল প্রথম কলামে বাম দিকে অর্ধেক জলাবদ্ধ হওয়া উচিত নয় এবং সর্বশেষে ডানদিকে অর্ধেক জলাবদ্ধ হওয়া উচিত নয়। কিছু গ্রিড সিস্টেম যেমন করায় সেই কলামগুলিতে কোনও ধরণের .firstবা .lastশ্রেণি ব্যবহার করার পরিবর্তে তারা .rowক্লাসটি নেতিবাচক মার্জিনে সেট করে যা কলামগুলির প্যাডিংয়ের সাথে মেলে। এটি একই সাথে এটিকে আরও প্রশস্ত করার সময়, প্রথম এবং শেষ কলামগুলির জলেরগুলি "টেনে" ফেলে।

.rowDIV আছে সত্যিই গ্রিড কলাম ছাড়া অন্য হোল্ড কিছু কখনো ব্যবহার করা উচিত। যদি এটি হয় তবে আপনি যে কোনও কলামের সাথে সম্পর্কিত কন্টেন্টটি স্থানান্তরিত দেখতে পাবেন, যেমনটি আপনার ফিডলে স্পষ্ট।

হালনাগাদ:

আমি উত্তর দেওয়ার পরে আপনি আপনার প্রশ্নটি পরিবর্তন করেছেন, সুতরাং আপনি এখন যে প্রশ্নটি জিজ্ঞাসা করছেন তার উত্তর এখানে: .containerপ্রথমটিতে শ্রেণি যুক্ত করুন <div>কাজের উদাহরণ দেখুন ।


2
গ্রিড কলাম প্যাডিং, না মার্জিন (BS3 মধ্যে) দ্বারা বিভক্ত করা হয়
ভাসিতে ভাসিতে

3
গ্রেট! এটি সমস্ত উপচে পড়া সামগ্রীকে ব্যাখ্যা করে।
রটউইক গাঙ্গুরদে

27

বুটস্ট্র্যাপ ৩.৩..7 এর সাহায্যে এই সমস্যাটি। কন্টেইনার-তরল দিয়ে .row মোড়ানো সমাধান করা হয়।


এটি আমার পক্ষে কাজ করেছিল, যদিও প্রাথমিকভাবে আমি ভেবেছিলাম এটি এটি হয়নি, কারণ এটি আমার বিকাশকারীর ওয়েব কনসোলটি খোলা রয়েছে যা প্রস্থকে হ্রাস করে, তবে দৃশ্যত এটিও গণ্ডগোল করে। ব্যবহারেরও .container-fluidএখানে পরামর্শ দেওয়া হয়েছিল: stackoverflow.com/a/23616447/5272567
ম্যাথিয়াস

মোড়ক ডিভিও অবস্থানের সময়ও কাজ করে absolute। ইঙ্গিতটির জন্য ধন্যবাদ
ইনসপ

যদি আমি এই উত্তরটি একাধিকবার ভোট দিতে পারি ... :)
rony36

বুটস্ট্র্যাপ 4 এর জন্য একই ফিক্স
রব এল

19

অনুরূপ পোস্টে আমার উত্তর নীচে দেখুন।

বুটস্ট্র্যাপ কেন .row -30px এর একটি ডিফল্ট মার্জিন-বাম থাকে?

আপনি মূলত "সারি" এর পরিবর্তে "ক্লিয়ারফিক্স" ব্যবহার করেন। এটি নেতিবাচক মার্জিন বাদ দিয়ে "সারি" হিসাবে ঠিক একই কাজ করে।


2
এই শ্রেণিগুলি দুটি পৃথক কাজ করে, যদিও তারা এটি দৃশ্যত করে বলে মনে হয় lear ক্লিয়ারটি প্রতিক্রিয়াশীল পরিস্থিতিতে এবং গ্রিড সিস্টেমগুলির সাথে .row এর আচরণটি সঠিক।
টড বাউর

এটি মোড়কের বাইরে উপচে পড়া বিষয়বস্তু সমাধান করে।
ভোজেন্দ্র রুনিয়র

তবে ভাল উপায় হ'ল ধারক দিয়ে সারি মোড়ানো।
ভোজেন্দ্র রুনিয়র

সেরা উত্তর! ইউপি!
অ্যান্ডারসন ব্রিসেন

18

আমি ধারক শ্রেণীর ভিতরে সারি ক্লাসটি ব্যবহার করেছি এবং এখনও কিছু সমস্যা ছিল। আমি ক্লাসে যুক্ত margin-left: auto; margin-right: auto;করার সময় .rowএটি ভাল কাজ করে।


8
এটা চমত্কার ভাবে কাজ করেছে! বুটস্ট্র্যাপ 4 এ 'এমএক্স-অটো' ক্লাস যুক্ত করা আমার জন্য ওভারফ্লো সমস্যাটি স্থির করেছে।
মিশেল এম।

3

@ মিশেল এম এই উত্তরটির পুরো ক্রেডিট প্রাপ্ত করা উচিত।
তিনি একটি মন্তব্যে বলেছেন:

বুটস্ট্র্যাপ 4 এ 'এমএক্স-অটো' ক্লাস যুক্ত করা আমার জন্য ওভারফ্লো সমস্যাটি স্থির করেছে।

আপনার নিজের প্রথম divএলিমেন্টটি আপডেট করতে হবে :

<div class="row mx-auto" style="background:#000000">

সমস্ত নেস্টেড-সারিগুলির জন্য এটি করার দরকার নেই (যদি তা থাকে তবে)।
শুধু যোগ mx-autoসর্বাধিক বাইরের থেকে rowউল্লম্ব-স্ক্রলবার এড়াতে (অথবা সারি)।
মার্জিনগুলি প্রতিস্থাপন করতে "সারি" শ্রেণি যুক্ত করে সমস্ত বুটস্ট্র্যাপ সারিগুলির আচরণকে ওভাররাইড করবেন না।


1

ভবিষ্যতের যে কোনও বিকাশকারীদের এই সমস্যাটি ডিবাগ করার জন্য:

বুটস্ট্র্যাপ সারি কলামগুলির জন্য প্যাডিং সেট করে, সুতরাং কোনও সারির সামগ্রীগুলির কোনওটিই ধারকটির বাইরে উপস্থিত হওয়া উচিত নয়। আপনি যদি এটির অভিজ্ঞতা নিচ্ছেন এবং আপনি বুটস্ট্র্যাপের গ্রিড সিস্টেমটি সঠিকভাবে কল -... ক্লাসগুলি ব্যবহার করছেন, সম্ভবত আপনার অতিরিক্ত কোনও সিএস কোথাও কলামগুলিতে প্যাডিং পুনরায় সেট করার সম্ভাবনা রয়েছে।


বা, আপনার কাছে বুটস্ট্র্যাপের একটি পুরানো সংস্করণ রয়েছে। উদাহরণস্বরূপ, 3.0.0 ভিএস2015 এর সাথে বিতরণ করা হয়েছে। দেখুন github.com/twbs/bootstrap/issues/8959
দু: সাহসিক কাজ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.