কম ব্যবহার না করে বুটস্ট্র্যাপ নাভবার ধসের ব্রেকপয়েন্টটি পরিবর্তন করুন

Question

বর্তমানে যখন ব্রাউজারের প্রস্থ 768px এর নীচে নেমে আসে, নাভবারটি ধসে মোডে পরিবর্তিত হয়। আমি এই প্রস্থটি 1000px এ পরিবর্তন করতে চাই তাই যখন ব্রাউজারটি 1000px এর নীচে থাকে নাভবারটি ধসের মোডে পরিবর্তিত হয়। আমি কম ব্যবহার না করে এটি করতে চাই, আমি কম নয় স্টাইলাস ব্যবহার করছি।

আমার ইস্যুটি এই প্রশ্নের মতোই: বুটস্ট্র্যাপ 3 নববার সঙ্কুচিত

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

ধন্যবাদ!

Answer 1

আপনাকে এটির জন্য একটি নির্দিষ্ট মিডিয়া ক্যোয়ারী লিখতে হবে , আপনার প্রশ্ন থেকে, 768px এর নীচে, নাবারটি ধসে পড়বে, সুতরাং এটি 768px এর উপরে এবং 1000px এর নীচে প্রয়োগ করুন, ঠিক এর মতো:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

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

Comments

প্রস্থ 768px এর নীচে থাকলে বর্তমানে নাবারটি ধসে পড়ে। প্রস্থটি 1000px এর নীচে থাকলে আমি নাবারটি ধসে পড়তে চাই। এর জন্য, আপনার 768 এবং 1000 এর মধ্যে .collapse প্রদর্শন করার দরকার নেই?

— Nearpoint

হ্যাঁ, collapseক্লাসটি মোবাইল স্ক্রিনের জন্য গুরুত্বপূর্ণ যাতে প্রস্থটি যদি 768px এর নীচে হয় তবে নববারটি হবে display:none, সুতরাং প্রয়োজনীয় পদক্ষেপটি 768 এবং 1000 চিহ্নের মধ্যে প্রয়োগ করা হবে ...

— সৌরভ এলপি

এটি বুটস্ট্র্যাপ 3 এ কাজ করে না কারণ আরও একটি বিধি রয়েছে navbar-collapse.collapseযা display: block !important। এটি অক্ষম করলে ফলস্বরূপ বোতামটি উপস্থিত হবে না ... সুতরাং আমি অনুমান করি যে এটি অনেক ক্লাসের পুনরায় সংজ্ঞায়িত করা দরকার, কেবল নয়collapse

— ড্যানিয়েল রিকি

হ্যাঁ, কাস্টম মিডিয়া ক্যোয়ারিতে বুটস্ট্র্যাপের একগুচ্ছ ক্লাসগুলি ওভাররাইড করা আবশ্যক: বুটপ্লি

— জিম

হা হা কে বুটস্ট্র্যাপ বানিয়েছে? ভাবি নি যে আমাদের এই ছোট্ট বিস্তারিতটি বদলাতে হবে?

— এমএইচ

Answer 2

2018 আপডেট

বুটস্ট্র্যাপ 4

navbar-expand-*ক্লাসগুলি ব্যবহার করে বুটস্ট্র্যাপ 4 এ নাবার বার ব্রেকপয়েন্ট পরিবর্তন করা সহজ :

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = এক্স স্ক্রিনে মোবাইল মেনু <576px
• navbar-expand-md এসএম স্ক্রিনে মোবাইল মেনু <768px
• navbar-expand-lg = এমডি স্ক্রিনগুলিতে মোবাইল মেনু <992px
• navbar-expand-xl এলজি স্ক্রিনগুলিতে মোবাইল 12 মেনু <1200px
• navbar-expand = কখনও মোবাইল মেনু ব্যবহার করবেন না
• (no expand class) = সর্বদা মোবাইল মেনু ব্যবহার করুন

আপনি বাদ navbar-expand-*দিলে মোবাইল মেনু allপ্রস্থে ব্যবহার করা হবে । এখানে 6 টি নাবারের একটি ডেমো রয়েছে: বুটস্ট্র্যাপ 4 ন্যাবার দৃষ্টান্ত

আপনি একটি সামান্য সিএসএস যোগ করে একটি কাস্টম ব্রেকপয়েন্ট (??? পিক্স) ব্যবহার করতে পারেন। উদাহরণস্বরূপ, এখানে 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

বুটস্ট্র্যাপ 4 কাস্টম ন্যাবারবার ব্রেকপয়েন্টের
বুটস্ট্র্যাপ 4 ন্যাবার বার ব্রেকপয়েন্ট উদাহরণ

---

বুটস্ট্র্যাপ 3

বুটস্ট্র্যাপ ৩.৩.x এর জন্য, নববার ব্রেকপয়েন্টটি ওভাররাইড করার জন্য এখানে ওয়ার্কিং সিএসএস রয়েছে। 991pxআপনি যে পয়েন্টটিতে নাবারটি ধসে যেতে চান তার পিক্সেল মাত্রায় পরিবর্তন করুন ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

991px এর জন্য কার্যকারী উদাহরণ: http://www.bootply.com/j7XJuaE5v6
1200px এর জন্য কার্যকারী উদাহরণ: https://www.codeply.com/go/VsYaOLzfb4 (অনুসন্ধানের ফর্ম সহ)

দ্রষ্টব্য: উপরেরগুলি 768px এরও বেশি কিছুতে কাজ করে । আপনার যদি এটি 768px এর চেয়ে কম পরিবর্তন করতে হয় তবে এখানে 768px এর চেয়ে কম উদাহরণ রয়েছে ।

---

Comments

এই প্রথম দেখার জন্য চেষ্টা করুন: [লিঙ্ক] ( getbootstrap.com/customize সন্ধান করুন: 'কম ভেরিয়েবল' -> 'মিডিয়া অনুসন্ধান ব্রেকপয়েন্টস' পরিবর্তন: @ স্ক্রিন-এলজি মান 1200px থেকে 1920px থেকে চিহ্নিত করুন: "গ্রিড সিস্টেম" -> @ গ্রিড-ফ্লোট -ব্রেকপয়েন্ট পরিবর্তন: @ স্ক্রিন-এসএম-মিনিট থেকে @ স্ক্রিন-এলজি পৃষ্ঠার শেষের জন্য স্ক্রোল করুন “" সংকলন এবং ডাউনলোড করুন "এ ক্লিক করুন এই ডাউনলোড করা ফাইলগুলি এক্সট্র্যাক্ট এবং ব্যবহার করুন

— rpalzona

এই codeর্ধ্বতন কোডটি কাজ করে যখন আমি 768px এর চেয়েও বেশি মান সেট করি, তবে আমার বিপরীতটি অর্জন করা দরকার ... আমি কেবল এটি 400px এ উদাহরণস্বরূপ ভেঙে যেতে চাই, তবে যখন আমি এই মানটি সেট করি তখন বুটস্ট্র্যাপটি মূল 768 বাছাই করে মনে হয় - কোন ধারনা? ধন্যবাদ

— ক্রিস রিচার্ডস

যদিও এই উত্তরটি কবজের মতো কাজ করে তবে এটি ড্রপডাউন মেনুতে গোলমাল করছে , সম্ভবত আপনার উত্তরটির উন্নতি করতে হবে।

— অভিষেক পান্ডে

@ অভিষেকপান্দে আমি এই উত্তরটি দরকারী (ড্রপডাউন সম্পর্কিত অংশ)

— পেয়েছি

ধন্যবাদ. পাশের চেকমার্ক সহ "সমাধান" এর বিপরীতে, আপনার কোডটি আসলে কাজ করে।

— মাইকেল এস মিলার

Answer 3

মধ্যে bootstrap3 , এই পরিবর্তনশীল পরিবর্তন গ্রিড-ভাসা-ব্রেকপয়েন্ট @ আপনার প্রয়োজনীয় কোনো একটিকে করতে। ডিফল্ট মান 768px

Comments

আপনি একটি উদাহরণ পোস্ট করতে পারেন, দয়া করে?

— e.thompsy

মনে রাখবেন যে আপনি যদি স্যাস ব্যবহার করছেন এবং আপনি বিক্রেতা কোডটি প্রতিস্থাপন করতে না চান (আপনার উচিত নয়), আপনাকে বুটস্ট্র্যাপ স্যাস ফাইলগুলির আগে আপনার কাস্টম মান সহ ভেরিয়েবলযুক্ত ফাইলটি অন্তর্ভুক্ত করতে হবে। বুটস্ট্রাপের ভেরিয়েবলগুলির কারণ হ'ল ডিফল্টতে সেট করা! মানগুলি, সুতরাং আমাদের ভ্যারিয়েবলগুলি প্রথমে আমদানি করে আমাদের এই মানগুলি ওভাররাইড করতে হবে।

— মাকিস কে।

দয়া করে এটি কীভাবে করবেন তার একটি উদাহরণ যুক্ত করুন ... আমি বুটস্ট্র্যাপে নতুন এবং গ্রীপ আমার প্রকল্পে এই পরিবর্তনশীলটির 0 টি উদাহরণ প্রকাশ করে।

— ম্যাট ক্লার্ক 21

@ ম্যাটক্লার্ক সংকলকটিতে @grid-float-breakpointসংজ্ঞায়িত হয়েছে: getbootstrap.com/customize - ডিফল্ট মানটি @screen-sm-minতবে আপনি এটিতে পরিবর্তন করতে পারেন 1234px।

— rybo111

Answer 4

অবশেষে http://getbootstrap.com/customize/ এ '@ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্ট' দিয়ে বিস্তৃত হয়ে পতনের প্রস্থ কীভাবে পরিবর্তন করা যায় তা নিয়ে কাজ করে ।

বুটস্ট্রেপ.সিএস-এ (29 মিনিটের সংস্করণে) লাইন 2923 এ যান এবং এতে পরিবর্তন @media screen and (min-width: 768px) {করুন@media screen and (min-width: 1000px) {

সুতরাং কোডটি শেষ হয়ে যাবে:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Comments

আপনি কাস্টমাইজারটি ব্যবহার করেছেন: আপনার উদ্ধৃত লাইন নম্বরটি আলাদা হবে নোট করুন: getbootstrap.com/customize

— হেনরিউইট

@grid-float-breakpointআমার responsive.lessজন্য আমার কাজগুলিতে সবেমাত্র পরিবর্তন হয়েছে !

— সিভিএনজি

আপনার বুটস্ট্র্যাপ সিএসএস ফাইলগুলি সরাসরি পরিবর্তন করার পরিবর্তে অন্য কোনও সিএসএস ফাইলে ওভাররাইড করা উচিত।

— ইভানকা টডোরোভা

প্রথম দর্শন: [লিঙ্ক] ( getbootstrap.com/customize সন্ধান করুন: 'কম ভেরিয়েবল' -> 'মিডিয়া অনুসন্ধান ব্রেকপয়েন্টস' পরিবর্তন: @ স্ক্রিন-এলজি মান 1200px থেকে 1920px থেকে চিহ্নিত করুন: "গ্রিড সিস্টেম" -> @ গ্রিড-ফ্লোট-ব্রেকপয়েন্ট পরিবর্তন করুন: @ স্ক্রিন-এসএম-মিনিট থেকে @ স্ক্রিন-এলজি পৃষ্ঠার শেষের দিকে স্ক্রোল করুন “" সংকলন এবং ডাউনলোড করুন "এ ক্লিক করুন এ ডাউনলোড করা ফাইলগুলি এক্সট্র্যাক্ট এবং ব্যবহার করুন

— rpalzona

Answer 5

আমি স্রেফ নিম্নলিখিত সিএসএস কোড ব্যবহার করে এটি সফলভাবে করেছি।

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Comments

প্রস্থ 768px থেকে 1000px এর মধ্যে কোথাও থাকলে এটি ধসে মেনু বোতামটি দেখায় না।

— কারিগর

@ ক্রাফটসম্যান: বোতামটির জন্য, এটি ব্যবহার করুন: .Nvbar-toggle {প্রদর্শন: ব্লক! গুরুত্বপূর্ণ; nav। নবার-শিরোনাম {প্রস্থ: 100%; উচ্চতা: 60px; }

— অনিকেত সূর্যবংশী

এখনও হ্যামবার্গার মেনুর ভিতরে থাকা সামগ্রীটি দেখায় না

— বায়জাদ

Answer 6

বুটস্ট্র্যাপ 3 .এলএসএস উত্স কোডে , একটি পরিবর্তককে variables.lessডাকা সংজ্ঞায়িত করা হয়েছে @grid-float-breakpointযা নিম্নলিখিত সহায়ক মন্তব্য করেছে:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

মিলটি @grid-float-breakpoint-maxমানটি বিয়োগ 1px এ সেট করা আছে:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

সমাধান:

তাই সেট @grid-float-breakpointপরিবর্তে 1000px মান এবং পুনর্নির্মাণের bootstrap.lessমধ্যে bootstrap.css:

যেমন

@grid-float-breakpoint: 1000px;

Comments

পুনর্নির্মাণ কিভাবে? আমি এই কমান্ড লাইনের চেষ্টা করেছি: $ lessc bootstrap.less bootstrap.cssকিন্তু কিছুই ঘটেনি

— অ্যান্থনিআর

@ অ্যান্থনিআরএন: আপনার প্রকল্পের সেটআপ কী তা আমার কোনও ধারণা নেই। আমি আমার ভিএস 2013 প্রকল্পের বুটস্ট্র্যাপের কম উত্সটি সহজভাবে আপডেট করেছি এবং এটি সংরক্ষণে পুনরায় তৈরি করা হয়েছে। সম্ভবত আপনি একটি নতুন প্রশ্ন জিজ্ঞাসা করা উচিত?

— 21:25

আমার সমস্যাটি এখানে বুটস্ট্র্যাপের অনলাইন কাস্টমাইজার সরঞ্জামটি ব্যবহার করে সমাধান করা হয়েছে getbootstrap.com/customize সমাধানের জন্য আপনাকে ধন্যবাদ!

— অ্যান্থনিআর

আমি মনে করি এটি গ্রহণযোগ্য উত্তর হওয়া উচিত, কারণ এটি ব্রেকপয়েন্টটি সংজ্ঞায়নের জন্য বুটস্ট্র্যাপগুলির নিজস্ব পদ্ধতি ব্যবহার করে। উদাহরণস্বরূপ, আমি 'পুনর্নির্মাণ' বুটস্ট্র্যাপকে সহজ করতে সক্ষম হয়েছি এবং ব্রেকিংপয়েন্ট হওয়ার জন্য যা প্রয়োজন তার সাথে এই পরিবর্তনশীলটি সেট করে কাঙ্ক্ষিত ফলাফল পেয়েছি।

— সার্জ মেলিস

grunt dist@ অ্যান্থনিআর পুনর্নির্মাণের জন্য আপনি গ্রান্ট কমান্ড ব্যবহার করুন যা ডিস্ট ডিরেক্টরি পুনরায় তৈরি করবে। আপনি যে কমান্ডটি আপনার gruntfile.js আছে সেই ডিরেক্টরি থেকে চালাবেন। তথ্যসূত্র: getbootstrap.com/getting-started/#grunt

— র‌্যাডমেশন

Answer 7

বুটস্ট্র্যাপ ভেরিয়েবলগুলি পরিবর্তন করার স্যাস উপায়টি আসলে বুটস্ট্র্যাপ-সাস গিথুব পৃষ্ঠায় নথিভুক্ত ।

আপনি @ ইম্পোর্ট বুটস্ট্র্যাপের আগে ভেরিয়েবলগুলি পুনরায় সংজ্ঞা দিন:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Answer 8

@ সাকিলি উত্তর ছাড়াও, নাবারের কাজের অভ্যন্তরে ড্রপডাউন মেনুগুলি তৈরি করার জন্য , তাদের ক্লাসগুলিকে ওভাররাইড করার জন্য যুক্ত করুন। চূড়ান্ত কোড বেলো:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .navbar-header {
            float: none;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            /*margin: 7.5px -15px;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

ডেমো কোড

Answer 9

বুটস্ট্র্যাপ ভি 4-তে, নেভিগেশন শীঘ্রই বা পরে বিভিন্ন সিএসএস ক্লাস ব্যবহার করে ভেঙে ফেলা যায়

উদাহরণ:

• NavBar-toggleable-ছাঃ
• NavBar-toggleable-MD
• NavBar-toggleable-এলজি

নেভিগেশন জন্য বোতাম সহ:

• লুকানো-SM-আপ
• লুকানো-MD-আপ
• লুকানো-এলজি-আপ

Comments

বর্তমান আলফাতে মনে হয় কেবল navbar-toggleable-smআমার কাছে যাবে, xsএটি কখনই টগল করে না। আমার কিছু ভুল হতে পারে। ধন্যবাদ!

— নারডওয়লার

@ আন্ডারওয়ালার দেখে মনে হচ্ছে আপনি ঠিক আছেন, এক্সএস থেকে এসএম এ একটি সম্পাদনা করেছেন।

— হাইটনিল্যান্ড

Answer 10

বুটস্ট্র্যাপ ৩.৩ এর জন্য এটি আপনার কেবলমাত্র কোডের প্রয়োজন:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Comments

পুরোপুরি কাজ করে না। এটি প্রদর্শিত মেনু আইটেমগুলি উল্লম্ব নয়, তবে অনুভূমিক।

— ভলমাইক

Answer 11

এটি আমার জন্য বুটস্ট্রা 3-এ কাজ করেছে

@media (min-width: 768px) {
    .navbar-header {
          float: none;
      }
      .navbar-toggle {
          display: block;
      }
      .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
      .navbar-collapse.collapse {
          display: none!important;
      }
      .navbar-collapse.collapse.in {
          display: block!important;
      }
      .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

এই দুটি বের করতে কিছুক্ষণ সময় নিলেন:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Comments

এটি আমার পক্ষে কাজ করেছে। একমাত্র ব্যতিক্রম হ'ল উপরের আপনার নমুনায় ন্যূনতম পিক্সেল প্রস্থটি 1000px হওয়া উচিত।

— সাসচা

Answer 12

আপনার সেরা বেটটি হ'ল আপনি যে সিএসএস প্রসেসর ব্যবহার করেন তার একটি বন্দর ব্যবহার করা।

আমি SASS এর একজন বড় অনুরাগী তাই আমি বর্তমানে https://github.com/thomas-mcdonal/bootstrap-sass ব্যবহার করি

দেখে মনে হচ্ছে এখানে স্টাইলাসের কাঁটাচামচ রয়েছে: https://github.com/Acquisio/bootstrap-stylus

অন্যথায়, অনুসন্ধান এবং প্রতিস্থাপন হ'ল সিএসএস সংস্করণে আপনার সেরা বন্ধু ...

Comments

সুতরাং অনুসন্ধান এবং প্রতিস্থাপন বিকল্পের জন্য, তার মানে বুটস্ট্র্যাপ.এসএস মিডিয়া কোয়েরিগুলি সরাসরি সম্পাদনা করা যায়? আমি কি এমন মিডিয়া ক্যোয়ারী পরিবর্তন করতে পারি যা কেবল নাবারটিতে প্রয়োগ হয়? আমাকে বলা হয়েছিল সোর্স বুটস্ট্র্যাপ ফাইলগুলি সম্পাদনা করা ভাল ধারণা নয়, তবে কেন জানি না, আপনি কী ভাবেন?

— নিকটে

Answer 13

হাই আমি মনে করি আপনি এটি সিএসএস ব্যবহার করে এটি করতে পারেন আপনি ব্রেকপয়েন্ট বুটস্ট্র্যাপ মেনু পরিবর্তন করতে পারেন

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Answer 14

নববার-টোগলার, .navbar- পতন, এবং .navbar-বিস্তৃত {-sm | -md | -lg | -xl} শ্রেণীর ব্যবহার করতে পারে যখন তাদের সামগ্রীগুলি একটি বোতামের পিছনে পড়ে যায় change অন্যান্য ইউটিলিটিগুলির সাথে সংমিশ্রণে আপনি নির্দিষ্ট উপাদান কখন প্রদর্শন করতে বা গোপন করতে পারবেন তা সহজেই চয়ন করতে পারেন।

কখনও না ভেঙে আসা নববারের জন্য, নববারে .navbar-বিস্তৃত শ্রেণি যুক্ত করুন। সর্বদা ধসে পড়া নববারের জন্য, কোনও। নবর-প্রসারিত শ্রেণি যুক্ত করবেন না।

উদাহরণ স্বরূপ :

<nav class="navbar navbar-expand-lg"></nav>

মোবাইলের মেনু বড় স্ক্রিনে প্রদর্শিত হচ্ছে।

তথ্যসূত্র: https://getbootstrap.com/docs/4.0/components/navbar/

Comments

হ্যাঁ, এটি আমার প্রয়োজন মতো ঠিক আমার জন্য কাজ করে। অবশ্যই, যদি আপনার আরও নির্দিষ্ট ব্রেকপয়েন্টের প্রয়োজন হয়, তবে আপনার নিজের মিডিয়া ক্যোয়ারীটি কনফিগার করা প্রয়োজন হবে (সুতরাং এই প্রশ্নের অনুকূল উত্তর)

— কোডেরি

Answer 15

এটি আমার জন্য কৌশলটি করেছিল:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Comments

আপনার সমাধান এবং ভীকের একটি সহ আমি খুঁজে পাচ্ছি যে 768 এবং 1000 এর মধ্যে মার্জিনগুলি যথাযথভাবে প্রসারিত হয়। তারা এই সীমা ছাড়িয়ে ভাল। আপনার সমাধানের সাথে ধসে পড়া মেনুটির আইকনটিও ভেঙে যাওয়ার পরে ডানদিকে থাকে না তবে "ব্র্যান্ড" এর বিপরীতে চাপ দেয়।

— মাইক ও'কনোর

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

— মাইক

Answer 16

বুটস্ট্র্যাপ 4-এ, আপনি যখন নবার-প্রসারণ- * বিস্তৃত ও ধসে পড়ে এবং হ্যামবার্গার (নাবার-টগলকারী) দেখান এবং লুকিয়ে রাখেন তখন ওভার রাইড করতে চান তবে আপনাকে সেই স্টাইল / সংজ্ঞাটি বুটস্ট্র্যাপ সিএসএসে খুঁজে পেতে হবে এবং এটি আপনার পুনরায় সংজ্ঞায়িত করতে হবে নিজস্ব কাস্টমস্টাইল.css (অথবা আপনি যদি এত ঝুঁকে থাকেন তবে সরাসরি বুটস্ট্র্যাপ সিএসএসে)।

যেমন। আমি চাইছিলাম নাভবার-প্রসারণ-এলজিটি ধসে পড়ে এবং 950px এ নাবার-টগলারের দেখায়। বুটস্ট্র্যাপ.এসএস-এ আমি খুঁজেছি:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

এবং এর নিচে ...

@media (min-width:992px) { 
    ... lots of styling ...
}

আমি উভয় @ মিডিয়া ক্যোয়ারী অনুলিপি করে এগুলি আমার স্টাইল সিএসএসে আটকে রেখেছি, তারপরে আমার প্রয়োজনীয়তার সাথে মাপসই আকার পরিবর্তন করেছি। আমি আমার কেসটি চেয়েছিলাম যে এটি 950px এ ভেঙে যেতে পারে। @ মিডিয়া ক্যোয়ারীগুলি অবশ্যই বিভিন্ন আকারের হওয়া উচিত (আমি অনুমান করছি), সুতরাং আমি ধারক সর্বাধিক প্রস্থটি 949.98px এ সেট করেছি এবং অন্যান্য @ মিডিয়া ক্যোয়ারির জন্য 950px ব্যবহার করেছি এবং তাই নিম্নলিখিত কোডটি আমার স্টাইল কোডে সংযুক্ত করা হয়েছিল। স্ট্যাকওভারফ্লো এবং অন্য কোথাও পাওয়া বাঁকা সমাধানগুলি থেকে বিচ্যুত হওয়া সহজ ছিল না। আশাকরি এটা সাহায্য করবে.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Answer 17

বুটস্ট্র্যাপের সাথে প্রতিক্রিয়া ব্যবহার করে আমার ওয়ার্কিং কোডটি এখানে

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Answer 18

এটি এখন বুটস্ট্র্যাপ ৪.৪ এ সমর্থিত

navbar-expand-sm 

Comments

হ্যাঁ সঠিক, তবে বড় স্ক্রিনে

— ন্যাভটি