কলামগুলির মধ্যে স্থান নিয়ে আমার একই সমস্যা ছিল। মূল সমস্যাটি হ'ল বুটস্ট্র্যাপ 3 এবং 4 এ থাকা কলামগুলি মার্জিনের পরিবর্তে প্যাডিং ব্যবহার করে। সুতরাং দুটি সংলগ্ন কলামগুলির জন্য পটভূমি রঙগুলি একে অপরকে স্পর্শ করে।
আমি এমন একটি সমাধান পেয়েছি যা আমাদের সমস্যার সাথে খাপ খায় এবং সম্ভবত বেশিরভাগ লোকেরা কলাম স্থান করার চেষ্টা করে এবং অন্যান্য গ্রিড সিস্টেমের মতো একই জলের প্রস্থ বজায় রাখার চেষ্টা করে।
এটিই ছিল আমাদের শেষ ফলাফল
কলামগুলির মধ্যে একটি ড্রপ ছায়া সহ ফাঁক থাকা সমস্যাযুক্ত ছিল। আমরা কলামগুলির মধ্যে অতিরিক্ত স্থান চাইনি। আমরা কেবল নর্দমাগুলিকে "স্বচ্ছ" হতে চেয়েছিলাম যাতে সাইটের পটভূমি রঙ দুটি সাদা কলামের মধ্যে উপস্থিত হয়।
এটি দুটি কলামের মার্কআপ
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
সিএসএস
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
এই পদ্ধতির জন্য "সারি" শ্রেণির বুটস্ট্র্যাপ ব্যবহারের মতোই নেতিবাচক মার্জিন সহ একটি অভ্যন্তরীণ ডিভ প্রয়োজন। এবং এই ডিভ, আমরা এটিকে "উত্থিত-ব্লক" বলেছিলাম, এটি অবশ্যই একটি কলামের সরাসরি সহোদর হতে হবে
এইভাবে আপনি আপনার কলামগুলির মধ্যে সঠিক প্যাডিং পান। আমি এমন সমাধানগুলি দেখেছি যা স্থান তৈরি করে কাজ করতে দেখা যায়, তবে দুর্ভাগ্যক্রমে তারা যে কলামগুলি তৈরি করে তাদের সারিটির উভয় পাশে অতিরিক্ত প্যাডিং থাকে সুতরাং এটি গ্রিড লেআউটটির জন্য ডিজাইন করা সারিটিকে আরও পাতলা করে শেষ করে। আপনি যদি পছন্দসই চেহারাটির জন্য চিত্রটি দেখেন তবে এর অর্থ হ'ল দুটি কলাম একসাথে বৃহত্তর স্তরের চেয়ে ছোট হবে যা গ্রিডের প্রাকৃতিক কাঠামোকে ভেঙে দেয়।
এই পদ্ধতির বড় অপূর্ণতা হ'ল এটির জন্য প্রতিটি কলামের সামগ্রী মোড়ানো অতিরিক্ত মার্কআপের প্রয়োজন। আমাদের জন্য এটি কাজ করে কারণ কাঙ্ক্ষিত চেহারাটি অর্জনের জন্য কেবলমাত্র নির্দিষ্ট কলামগুলির মধ্যে তাদের মধ্যে জায়গার প্রয়োজন।
