বুটস্ট্র্যাপ 3 এবং 4। গ্রিডের সাথে অযাচিত প্যাডিং যুক্ত কন্টেইনার-তরল

Question 1

আমি আমার সামগ্রীটি তরল হতে চাই, তবে .container-fluidবুটস্ট্র্যাপের গ্রিডটি ব্যবহার করার সময় , আমি এখনও প্যাডিং দেখছি।

আমি কীভাবে প্যাডিং থেকে মুক্তি পাব?

আমি দেখতে পাচ্ছি যে আমি প্যাডিংটি .rowপাচ্ছি না তবে আমি কলামগুলি যুক্ত করতে চাই এবং আমি যত তাড়াতাড়ি করব, প্যাডিংটি আবার ফিরে আসবে।

আমি পূর্ণ প্রস্থে কলামগুলি ব্যবহার করতে সক্ষম হতে চাই।

একটি উদাহরণ:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

সমাধান আমি পেয়েছি:

বুটস্ট্র্যাপ.এসএস ওভাররাইড করুন, লিঙ্ক 1427 এবং 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

প্রতি

padding-right: 0px;
padding-left: 0px;

Question 2

আপনার প্রতিটি পাত্রে একটি "সারি" যুক্ত করা উচিত যা এই সমস্যাটিকে "ঠিক" করবে!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Http://jsfiddle.net/3px20h6t/ দেখুন

Question 3

বুটস্ট্র্যাপ থেকে আসল সিএসএস সন্ধান করুন

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

আপনি যখন কোনও .container-fluidক্লাস যুক্ত করবেন, এটি 15px এর অনুভূমিক প্যাডিং যুক্ত করবে এবং .rowসারিতে থাকা নেতিবাচক মার্জিন দ্বারা আপনি যখন শিশু উপাদান হিসাবে কোনও শ্রেণি যুক্ত করবেন তখন এটি সরিয়ে দেওয়া হবে ।

Question 4

5 বছর কেটে গেছে, এবং এটি বেশ আশ্চর্যজনক যে এখানে অনেকগুলি উত্তর রয়েছে যা বুটস্ট্র্যাপের নিয়মগুলি অনুসরণ করে না (বা বিপক্ষে রয়েছে) বা আসলে প্রশ্নের উত্তর দেয় না ...

সংক্ষিপ্ত উত্তর: প্যাডিং সরানোর জন্য কেবল আপনার সারিতে
বুটস্ট্র্যাপের no-guttersক্লাসটি ব্যবহার করুন :

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(এছাড়াও আপনি </div>আপনার ফাইলের শেষে যুক্ত করতে ভুলে গেছেন It's এটি উপরের কোডেও ঠিক করা হয়েছে)

বিঃদ্রঃ:

এমন কিছু ঘটনা রয়েছে যখন আপনি নিজেই ধারকটির প্যাডিং সরাতে চান । এই ক্ষেত্রে ডকুমেন্টেশন দ্বারা প্রস্তাবিত হিসাবে ড্রপ .containerবা .container-fluidক্লাস বিবেচনা করুন ।

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

দীর্ঘ উত্তর:

আপনি যে প্যাডিংগুলি পান সেটি বুটস্ট্র্যাপের ডকুমেন্টেশনে ডকুমেন্টেড রয়েছে :

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

এবং সমাধান সম্পর্কে, যা নথিভুক্তও হয়েছিল:

স্বতন্ত্র কলামগুলির মধ্যে জলের তৈরি করতে কলামগুলির আনুভূমিক প্যাডিং রয়েছে, তবে, আপনি .row এর উপর নন -গটার দিয়ে কলামগুলি থেকে সারি এবং প্যাডিং থেকে মার্জিনটি সরিয়ে ফেলতে পারেন ।

ধারক নামানোর বিষয়ে:

একটি প্রান্ত থেকে প্রান্ত নকশা প্রয়োজন? পিতামাতাকে .সামাত্র বা .সাম্প্রবাহী-তরল ড্রপ করুন।

বোনাস: অন্যান্য উত্তর পাওয়া ভুল সম্পর্কে

ডকুমেন্টেশন যেমন বলেছে তেমন সমস্ত সামগ্রী আপনি-তে colরেখেছেন এবং সেগুলি মোড়ানো রয়েছে তা নিশ্চিত করার পরিবর্তে বুটস্ট্র্যাপের ধারক ক্লাস হ্যাক করা থেকে বিরত থাকুন :row

গ্রিড লেআউটে কন্টেন্ট অবশ্যই কলামের মধ্যে রাখতে হবে এবং কেবলমাত্র কলামগুলিই সারিগুলির তাত্ক্ষণিক শিশু হতে পারে।

যদি আপনাকে এখনও হ্যাক করতে হয় (কেবলমাত্র কেউ ইতিমধ্যে কিছু px-0ঝামেলা জাগিয়েছে এবং আপনার সমস্যাটি দ্রুত সমাধান করতে হবে) পরিবর্তে অনুভূমিক প্যাডিংগুলি মুছে ফেলার জন্য pl-0 pr-0বা আপনার স্টাইলগুলি পুনরায় উদ্ভাবনের জন্য বুটস্ট্র্যাপ ব্যবহার করা বিবেচনা করুন ।

Question 5

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

আমি যা বলতে পারি তা থেকে কোনও পরিষ্কার-পরিচ্ছন্ন সমাধান নেই। এটি আমার পক্ষে কাজ করে তবে এটি বুটস্ট্র্যাপের দ্বারা সমর্থিত কোনও কিছুর বাইরে well তবে এটি এখন (বুটস্ট্র্যাপ 3.3.5 এবং 4.0-আলফা) এর জন্য কাজ করে।

http://www.bootply.com/ioWBaljBAd

নমুনা এইচটিএমএল:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
      <div class="col-sm-4 col-md-3">…</div>
    </div>
  </div>
</div>

সিএসএস:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

কৌতুকটি divপাত্রে প্যাডিংয়ের জন্য অতিরিক্ত -15px মার্জিন তৈরি করতে সারি এবং কলামগুলির মধ্যে একটি বাসা বাঁধে । অতিরিক্ত নেতিবাচক মার্জিন ছোট ভিউপোর্টগুলিতে অনুভূমিক স্ক্রোল তৈরি করে (হোয়াইটস্পেসে)। এটি দমন করতে প্রয়োজন যোগ overflow-x: hiddenকরা .rowপ্রয়োজন।

এটি .container-fluidহিসাবে একই কাজ করে .container।

Question 6

সুতরাং বুটস্ট্র্যাপ 4 এর সংক্ষিপ্তসার এখানে দেওয়া হল:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

এটা আমার জন্য কাজ করে.

Question 7

বাম এবং ডান প্যাডিং 0 হিসাবে চিহ্নিত করে কনটেইনার-তরল দ্বারা যুক্ত প্যাডিংকে কেন তুচ্ছ করবেন না ?

<div class="container-fluid pl-0 pr-0">

আরও ভাল উপায়? ধারক পর্যায়ে কোনও প্যাডিং নেই (ক্লিনার)

<div class="container-fluid pl-0 pr-0">

Question 8

আপনার কেবল বুটস্ট্র্যাপের। কনটেনার ক্লাসে এই সিএসএসের বৈশিষ্ট্যগুলি দরকার এবং আপনি তার ভিতরে সাধারণ গ্রিড সিস্টেমটি রাখতে পারেন কনটেইনারটির সামগ্রী ছাড়া তার বাইরে চলে যাবে (ভিউপোর্টে স্ক্রোল-এক্স ছাড়াই)।

এইচটিএমএল:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

সিএসএস:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}

Question 9

নতুন আলফা সংস্করণগুলিতে তারা ইউটিলিটি স্পেসিং ক্লাস চালু করেছে । যদি আপনি এগুলি চালাক উপায়ে ব্যবহার করেন তবে কাঠামোটি টুইঙ্ক করা যেতে পারে।

ব্যবধান ইউটিলিটি ক্লাস

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3">…</div>
        <div class="col-sm-4 col-md-3 pr-0">…</div>
    </div>
</div>

pl-0এবং pr-0কলামগুলি থেকে নেতৃস্থানীয় এবং পিছনের প্যাডিং সরিয়ে ফেলবে। একটি ইস্যু বাম হ'ল একটি কলামের এমবেড করা সারিগুলি, কারণ তাদের এখনও নেতিবাচক মার্জিন রয়েছে। এক্ষেত্রে:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

সংস্করণের পার্থক্য

এছাড়াও নোট করুন ইউটিলিটি স্পেসিং ক্লাসগুলি সংস্করণ থেকে পরিবর্তন করা হয়েছিল 4.0.0-alpha.4। সেগুলি 2 টি ড্যাশ দ্বারা পৃথক করার আগে যেমন => p-x-0এবং আরও p-l-0...

সংস্করণ 3 এর জন্য বিষয়টিতে থাকতে: আমি বুটস্ট্র্যাপ 3 প্রকল্পে এটি ব্যবহার করি এবং এই নির্দিষ্ট ব্যবধানের জন্য কম্পাস সেটআপটি অন্তর্ভুক্ত করি bootstrap-sass(সংস্করণ 3) অথবা bootstrap(সংস্করণ 4.0.0-আলফা.3) ডাবল ড্যাশ সহ বা bootstrap(সংস্করণ 4.0.0-alpha.4 এবং উপরে) একক ড্যাশ সহ।

এছাড়াও, সর্বশেষ সংস্করণ (গুলি) pt-5কেবল 3 এর পরিবর্তে 5 গুণ অনুপাত (উদাহরণস্বরূপ: প্যাডিং-টপ 5) অবধি বাড়বে।

কম্পাস

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

সিএসএস আউটপুট

আপনি অবশ্যই কোনও উত্পন্ন সিএসএস ফাইল থেকে প্যাডিং স্পেসিং ক্লাসগুলি সর্বদা অনুলিপি / পেস্ট করতে পারেন।

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

Question 10

আমি মনে করি কেউই প্রশ্নের সঠিক উত্তর দেয়নি। আমার কাজের সমাধানটি: ১. ধারক-তরল শ্রেণীর উদাহরণ (.maxx) সহ কেবলমাত্র অন্য ক্লাসটি ঘোষণা করুন:

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

স্নিপেট প্রসারিত করুন

তারপরে CSS অংশে সুনির্দিষ্টতা ব্যবহার করে এটি করুন:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

স্নিপেট প্রসারিত করুন

এটি 100% কাজ করবে এবং বাম এবং ডান থেকে প্যাডিং সরিয়ে দেবে। আশা করি এটা কাজে লাগবে.

Question 11

আপনি configuratior সাথে কাজ করেন, তাহলে আপনি সেট করতে পারেন @grid-gutter-widthথেকে 30pxথেকে0

Question 12

আমি ব্যবহার করেছি <div class="container-fluid" style="padding: 0px !important"> এবং এটি কাজ করছে বলে মনে হচ্ছে।

Question 13

আমি নিজেই এটির সাথে লড়াই করে যাচ্ছি এবং অবশেষে আমি বিশ্বাস করি এটি আমার কাছে বেরিয়ে এসেছে। এই প্রশ্নটিতে কতগুলি ব্যর্থ উত্তর রয়েছে তা অবিশ্বাস্য

আপনাকে যা করতে হবে তা হ'ল আপনার সমস্ত .col উপাদানগুলি থেকে প্যাডিং অপসারণ করা এবং প্যাকেটগুলি। কনটেনার-তরল থেকেও সরান।

আমি নিজের প্রকল্পে এটি আমার সিএসএস ফাইলে নিম্নলিখিতটি যুক্ত করে কিছুটা slালুভাবে করেছি:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

আমি যে সমস্ত বিভিন্ন কর্ন মাপ ব্যবহার করছি তার জন্য অ্যাকাউন্ট করার জন্য আমার কাছে এখানে বিভিন্ন করল আকার রয়েছে। আমি আত্মবিশ্বাসী যে সিএসএস লেখার একটি পরিষ্কার উপায় আছে তবে এটি শেষ ফলাফলটি চিত্রিত করে।

Question 14

ব্যবহার করুন px-0উপর containerএবং no-guttersউপর rowpaddings মুছে ফেলার জন্য।

বুটস্ট্র্যাপ 4 - গ্রিড সিস্টেম থেকে উদ্ধৃতি দেওয়া :

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

কলাম, ব্যক্তিগত কলাম মধ্যে গাটার তৈরি করতে অনুভূমিক প্যাডিং আছে তবে আপনার সাথে কলাম থেকে সারি থেকে মার্জিন এবং প্যাডিং অপসারণ করতে পারেন .no-guttersউপর .row।

নিম্নলিখিতটি একটি লাইভ ডেমো:

h1 {
  background-color: tomato;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

এই কাজটি করার কারণটি হ'ল container-fluidএবং colউভয়েরই নীচে প্যাডিং রয়েছে:

padding-right: 15px;
padding-left: 15px;

px-0থেকে অনুভূমিক প্যাডিং অপসারণ করতে পারেন container-fluidএবং no-guttersথেকে প্যাডিং অপসারণ করতে পারেন col।