twitter bootstrap - প্রতিক্রিয়াশীল, কীভাবে বাম কাস্টম স্থির এবং ডান স্ক্রোলযোগ্য 4 এ?



twitter-bootstrap sticky (1)

আমি নিশ্চিত না যে আপনি কেবল 1 টি নির্দিষ্ট সাইড সহ কোনও লেআউট চান বা পাদদেশটি পাদদেশে না পৌঁছানো অবধি স্থির করা উচিত (ট্রুলিয়ার মতো)। এখানে স্থির বাম পাশের একটি সাধারণ বিন্যাস (50 Sp বিভক্ত)।

body, html {
    height: 100%;
}

#left {
    position: fixed;
    top: 0;
    bottom: 0;
}

https://www.codeply.com/go/IuOp3nvCpy

পার্শ্বটি কেবলমাত্র নির্দিষ্ট স্থানে স্থির (বা স্টিকি) করার জন্য, position:sticky সমস্ত ব্রাউজারে position:sticky খুব ভাল কাজ করে না। এখানে বর্ণিত হিসাবে আমি একটি প্লাগইন বা পলিফিল ব্যবহার করব : বুটস্ট্র্যাপ 4 সহ একটি সাইডবারটি দৃশ্যমান রাখতে সিএসএস অবস্থান কীভাবে ব্যবহার করা যায়

বুটস্ট্র্যাপ Update.০.০ আপডেট করুন - fixed-top ক্লাসটি এখন বুটস্ট্র্যাপে রয়েছে যা position:fixed জন্য প্রয়োজনীয় অতিরিক্ত সিএসএস অপসারণ করতে বাম পাশের কলামে ব্যবহার করা যেতে পারে position:fixed

বুটস্ট্র্যাপ 4.1 আপডেট করুন - h-100 ক্লাসটি এখন উপলব্ধ যা height:100% জন্য প্রয়োজনীয় অতিরিক্ত সিএসএসকে সরিয়ে দেয় height:100% : https://www.codeply.com/go/ySC2l4xcEi

প্রতিক্রিয়াশীল - মন্তব্যে উল্লিখিত হিসাবে, একটি মিডিয়া ক্যোয়ারী লেআউটটিকে প্রতিক্রিয়াশীল করতে ব্যবহার করা যেতে পারে: https://www.codeply.com/go/pqzJB4thBY

সম্পর্কিত:
ডান পাশে স্থির কর্ন
বুটস্ট্র্যাপ 4 দিয়ে একটি স্থির সাইডবার লেআউটটি কীভাবে তৈরি করবেন?

আমি কৌনিক 4, বুটস্ট্র্যাপ 4 ব্যবহার করছি এবং একটি স্থির স্ক্রোলযোগ্য ডান ডিভি এবং একটি স্থির বাম ডিভ প্রয়োগ করার চেষ্টা করছি। ট্রুলিয়া যা আছে তার সাথে এটি খুব মিল পাওয়া উচিত।

বুটস্ট্র্যাপ এফিক্স jQuery প্লাগইনটি সংস্করণ 4 এ ফেলেছে তাই এই পদ্ধতিটি আর বৈধ নয়, তারা অবস্থান ব্যবহার করার পরামর্শ দেয়: স্টিকি, তবে আমি এটি কাজ করতে পারি না।

সাহায্য করুন!

index.html

<div class="container-fluid">
  <div class="row h-100">
    <div class="col-md-6">
      <div id="left-container">
        <div class="search-property">
          <input type="text">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div id="right-container">
        <app-home-right></app-home-right>
      </div>
    </div>  
  </div>
</div>

style.css

#left-container {
  height: 100%;

  position: fixed;
  width: inherit; 
}

#right-container {
  position: absolute;
}

.search-property {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  margin-left: 50%;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.border {
  border: 1px solid black;
}




twitter-bootstrap-4