বুটস্ট্র্যাপ 3 নববার সঙ্কুচিত

Question

বুটস্ট্র্যাপ 3 ন্যাবার ধসে পড়েছে এমন পয়েন্টটি বাড়ানোর কোনও উপায় আছে (যেমন এটি প্রতিকৃতি ট্যাবলেটে একটি ড্রপ ডাউনে পড়ে যায়)?

এই দুটি বুটস্ট্র্যাপ 2 তে প্রযোজ্য ছিল কিন্তু এখন নয়!

টুইটার বুটস্ট্র্যাপ-প্রতিক্রিয়াশীল ব্যবহার করে কীভাবে নাবার দুরের চৌম্বকটি পরিবর্তন করবেন?

ডিফল্ট প্রতিক্রিয়াশীল নাবার বার ব্রেকপয়েন্ট পরিবর্তন করুন

Comments

কেন তারা প্রযোজ্য নয়?

— পিডাব্লু কাদ

এটি আমার কাছে দেখেছিল যে কোডটি নিজেই বেশ কিছুটা পরিবর্তন হয়ে গেছে

— टिিমক 22

আমি বেশ অনুসরণ না। আপনি সিএসএস কোড বলতে চাচ্ছেন? কয়েকটি অপ্রাপ্তবয়স্ক টুইটের সাথে ক্লাসগুলি একই রকম হওয়া উচিত

— পিডব্লিউ কাদ

চিন্তিত হবেন না আমি মনে করি কাস্টমাইজড ডাউনলোডগুলির কারণে (আমি সম্পাদনার জন্য একটি নির্দিষ্ট লাইন নম্বর নির্দিষ্ট করার জন্য একটি লিঙ্ক পোস্ট করেছি যে উত্তরগুলির মধ্যে একটি)

— তিমাহ

stackoverflow.com/a/23536146/563309 - আমার জন্য কাজ করেছে, কাউকে সাহায্য করবে ...

— জেননডি

Answer 1

আমারও আজ একই সমস্যা ছিল।

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

এটি একটি স্থানীয় কার্যকারিতা: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

আপনার .navbar-expand{-sm|-md|-lg|-xl}ক্লাস ব্যবহার করতে হবে :

<nav class="navbar navbar-expand-md navbar-light bg-light">

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

@media (max-width: 991px) {
    .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;
    }
    .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;
    }
}

শুধু পরিবর্তন 991pxদ্বারা 1199pxজন্য mdমাপ।

ডেমো

Comments

.navbar-collapse.collapse.in { display: block!important; }এটি অদৃশ্য হওয়ার হাত থেকে রক্ষা করার জন্য যুক্ত করতে হয়েছিল। ভাল কাজ যদিও, আমার ঘন্টা বাঁচায়।

— ডেভ ফোবার

দুর্দান্ত বিকল্প কিন্তু .navbar-পতন .ollapse.in to প্রদর্শন যোগ করতে হয়েছিল: ব্লক! গুরুত্বপূর্ণ; মার্জিন-শীর্ষ: 0 পিক্স; }

— মাভিস

আমি এ সম্পর্কে যা পছন্দ করি তা হ'ল আমি যদি বুটস্ট্র্যাপ আপগ্রেড করি তবে ভেরিয়েবলটি সন্ধান এবং এটি পুনরায় সংশোধন করার বিষয়ে আমার চিন্তা করার দরকার নেই।

— স্কুবাস্টেভ

তবে ড্রপডাউনগুলি তখনও ডেস্কটপ মোডে ছিল, আমাকে 3934 লাইনে কোডটি সম্পাদনা করতে হবে সর্বোচ্চ - 999 (বুটস্ট্র্যাপ সিএসএসে) তে, আমি বুটস্ট্র্যাপ ৩.২ ব্যবহার করছি। যদি কারও এটির প্রয়োজন হয়।

— চন্দন

এটি dropdown-menuএনএভি বারে আইটেমগুলি পরিচালনা করবে বলে মনে হয় না ।

— অ্যালেক্স

Answer 2

বুটস্ট্র্যাপ 2 এবং বুটস্ট্র্যাপ 3 এর মধ্যে বড় পার্থক্য হ'ল বুটস্ট্র্যাপ 3 হ'ল "প্রথম মোবাইল"।

এর অর্থ ডিফল্ট শৈলীগুলি মোবাইল ডিভাইসগুলির জন্য এবং নববার ক্ষেত্রে ডিজাইন করা হয়েছে, এর অর্থ এটি ডিফল্টরূপে "ধসে পড়ে" এবং যখন এটি একটি নির্দিষ্ট ন্যূনতম আকারে পৌঁছায় তখন "প্রসারিত" হয়।

বুটস্ট্র্যাপ 3 এর সাইটে আসলে কী করতে হবে তার একটি "ইঙ্গিত" রয়েছে: http://getbootstrap.com/compferences/#navbar

সঙ্কুচিত পয়েন্টটি কাস্টমাইজ করুন

আপনার নাবারটিতে থাকা সামগ্রীর উপর নির্ভর করে আপনার পয়েন্টটি পরিবর্তনের প্রয়োজন হতে পারে যেখানে আপনার নাবারটি ধসে পড়া এবং অনুভূমিক মোডের মধ্যে স্যুইচ করে। @ গ্রিড-ফ্লোট-ব্রেকপয়েন্ট পয়েন্টটি কাস্টমাইজ করুন বা আপনার নিজস্ব মিডিয়া ক্যোয়ারী যুক্ত করুন।

আপনি যদি আপনার কমকে পুনরায় সংকলন করতে চলেছেন তবে আপনি variables.lessফাইলটিতে উল্লিখিত এলএসইএস ভেরিয়েবলটি খুঁজে পাবেন । এটি বর্তমানে "প্রসারিত" এ সেট রয়েছে @media (min-width: 768px)যা বুটস্ট্র্যাপ 3 পদ দ্বারা "ছোট স্ক্রিন" (অর্থাত্ একটি ট্যাবলেট)।

@grid-float-breakpoint: @screen-tablet;

আপনি যদি ধসে কিছুটা বেশি সময় ধরে রাখতে চান তবে আপনি এটিকে ঠিক করতে পারেন:

@grid-float-breakpoint: @screen-desktop; (992px ব্রেক-পয়েন্ট)

বা শীঘ্রই প্রসারিত করুন

@grid-float-breakpoint: @screen-phone (480px ব্রেক-পয়েন্ট)

আপনি যদি এটি পরে প্রসারিত করতে চান এবং কম সংক্ষেপে পুনরায় সংকলন করতে না চান তবে আপনাকে প্রয়োগ করা স্টাইলগুলি ওভাররাইট করতে হবে 768px মিডিয়া ক্যোয়ারীতে এবং সেগুলি পূর্বের মানটিতে ফিরে আসতে হবে। তারপরে উপযুক্ত সময়ে এগুলি পুনরায় যুক্ত করুন।

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

কম সংলগ্নকরণ কেবল ভেরিয়েবল পরিবর্তন করে আপনার জন্য সমস্ত জাদু করবে। যা কম / SASS প্রাক-সংকলকগুলির বিন্দু। =)

(দ্রষ্টব্য, আমি সেগুলি সন্ধান করলাম, এটি প্রায় 100 টি লাইন কোড, যা আমার পক্ষে ধারণাটি ফেলে দেওয়ার জন্য যথেষ্ট বিরক্তিকর এবং কোনও প্রদত্ত প্রকল্পের জন্য বুটস্ট্র্যাপটি পুনরায় সংকলন করতে এবং দুর্ঘটনার কারণে কোনও কিছুতে গোলমাল করা এড়াতে পারে)

আমি আশা করি এটি সাহায্য করবে!

চিয়ার্স!

Comments

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

— রাহুল পাটোয়া

@ রাহুলপাওয়া আপনি যদি পুরো বুটস্ট্র্যাপ 3 জিপ ডাউনলোড করেন তবে আপনি এটির সাথে সমস্ত বিকাশ ফাইল পাবেন। বুটস্ট্র্যাপ বিকাশ অব্যাহত রাখতে এই ফাইলগুলিই ব্যবহার করা হয় এবং সুরকার এবং গ্রান্ট ওয়ার্ক ফাইলগুলি, গিট সিস্টেম ফাইলগুলি, কম ফাইলগুলি ইত্যাদি অন্তর্ভুক্ত রয়েছে files সম্পূর্ণ ফাইলগুলি / ডিস ফোল্ডারে অবস্থিত। আপনি এর জন্য ফোল্ডার দেখতে পাবেন /css, /js, /fonts। এটিকে কাস্টমাইজ করা আপনার নির্বাচিত সংকলিত ফাইলগুলি দেয়।

— jumbertucci

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

— রাহুল পাটোয়া

@ রাহুলপাটোয়া কম সংকলনের একাধিক উপায় রয়েছে। কম ওয়েবসাইট ব্যাখ্যা উভয় একটি ক্লায়েন্ট এবং সার্ভার প্রান্তের পদ্ধতি থেকে কিভাবে। ক্রাঞ্চ আপনি ব্যবহার করতে পারেন এমন একটি সাধারণ জিইউআই। বুটস্ট্র্যাপের ওয়েবসাইটটি বিশেষত তাদের RECESS সরঞ্জামটি ব্যবহার করার পরামর্শ দেয় । এবং আরও আছে ।

— jumbertucci

সবচেয়ে সহজ উপায় মাত্র যেতে হয় getbootstrap.com/customize \ পুনরায় সংজ্ঞায়িত @ মত \ @ স্ক্রিন-XS-মিনিট একটি ছোট স্ক্রিন সাইজ জন্য কিছু হার্ডকোডেড জন্য গ্রিড-ভাসা-ব্রেকপয়েন্ট মান (যেমন 520px) অথবা

— Neves

Answer 3

বুটস্ট্র্যাপ কাস্টমাইজ করা সহজ উপায়

পরিবর্তনশীল সন্ধান করুন:

 @grid-float-breakpoint

যা @ স্ক্রিন-এসএম এ সেট করা আছে, আপনি এটি আপনার প্রয়োজন অনুসারে পরিবর্তন করতে পারেন। আশা করি এটা সাহায্য করবে!

Comments

একে খুব ছোট মান হিসাবে সেট করা যেমন 1 পিএক্স নেভবার সংঘটনকে অক্ষম করবে (উদাহরণস্বরূপ যদি আপনি একটি উত্তর-প্রতিক্রিয়াশীল নাবার চান তবে)।

— গ্রেগর Slavec

ভেঙে যাওয়া মেনুটি 480px এ সীমাবদ্ধ করতে আমি এটি '@ স্ক্রিন-এক্সএস-মিনিট' এও সেট করে রেখেছি। কিছু সাইটের জন্য এটি ভালভাবে কাজ করে এবং একটি দুর্দান্ত প্রভাব তৈরি করে যেখানে আপনি সহজেই একটি পূর্ণ মেনু থেকে আইফোনের একটি ধসে পড়াতে পরিবর্তন করতে পারবেন অভিযোজন পরিবর্তন করে।

— চিয়াপ্পা

Answer 4

এগুলি ভেরিয়েবলগুলিতে নিয়ন্ত্রিত হয়, উত্সের আশেপাশে কুঁচকে যাওয়ার দরকার নেই। বুটস্ট্র্যাপের সাহায্যে প্রথমে ভেরিয়েবল চেষ্টা করুন, তারপরে ওভাররাইডগুলি। তারপরে ফিরে যান এবং আবার ভেরিয়েবল ব্যবহার করে দেখুন;)

আমি রেলগুলির সাথে বুটস্ট্র্যাপ-স্যাস ব্যবহার করেছি তবে এটি ডিফল্ট কমের সাথে একই।

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

এটাই! এই ভেরিয়েবলের রেফারেন্স পৃষ্ঠাটি অতি কার্যকর: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Comments

তাই পরিষ্কার। দুর্দান্ত সমাধান। ধন্যবাদ।

— জেদীদিহ হুর্ট

Answer 5

Seb33300 ধন্যবাদ আমি এই কাজ পেয়েছি। তবে, একটি গুরুত্বপূর্ণ অংশ অনুপস্থিত বলে মনে হচ্ছে। কমপক্ষে বুটস্ট্র্যাপ সংস্করণে ৩.১.১।

আমার সমস্যাটি ছিল যে সঠিক প্রস্থে নাভবারটি সেই অনুযায়ী ধসে গেছে, তবে মেনু বোতামটি কার্যকর হয়নি work আমি মেনুটি প্রসারিত করতে এবং ভেঙে দিতে পারি না।

এর কারণ হ'ল পতন.ইন ক্লাসটি .navbar-পতন.কোলাপসে গুরুত্বপূর্ণ! দ্বারা ওভাররাইড হয়ে গেছে এবং ".inলন.ইন" যোগ করেও সমাধান করা যেতে পারে। নীচে Seb33300 উদাহরণ সম্পূর্ণ:

@media (max-width: 991px) {
    .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;
    }
}

Comments

বুটস্ট্র্যাপ 3.3.6 এর জন্য প্রিফেক্ট স্ট্যান্ডার্ড সিএসএস সমাধান, ধন্যবাদ!

— xxxbence

Answer 6

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

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

তারপর NavBar ব্যবহার করার জন্য পতন মান সেট @ গ্রিড-ভাসা-ব্রেকপয়েন্ট সম্পর্কে লাইন 232. এ পরিবর্তনশীল ডিফল্ট এটি সেট করার মাধ্যমে @ স্ক্রিন-ট্যাবলেট । আপনি যদি চান তবে আপনি পিক্সেল মানটি ব্যবহার করতে পারেন তবে আমি কম ভেরিয়েবল ব্যবহার করতে পছন্দ করি।

Comments

নোট করুন যে মাপগুলি এখন হ্রাস করা হয়েছে, এবং যা অবশিষ্ট রয়েছে তা -minহ'ল: @ স্ক্রিন-এমডি-মিনিট: 800px; @ স্ক্রিন-এলজি-মিনিট: 1200px; @ গ্রিড-ফ্লোট-ব্রেকপয়েন্ট: @ স্ক্রিন-এমডি-মিনিট;

— ডগ লি

Answer 7

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

1) মেনু আইটেমগুলির সংখ্যা বা তাদের দৈর্ঘ্য হ্রাস করার চেষ্টা করুন, মেনু আইটেমগুলি সরিয়ে দেওয়া বা শব্দগুলি ছোট করার মতো।

2) মেনু আইটেমগুলির মধ্যে প্যাডিং হ্রাস করা হচ্ছে:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

ডিফল্ট প্যাডিং উভয় পক্ষের 15 বর্গ (বাম এবং ডান)।

আপনি যদি প্রতিটি স্বতন্ত্র পাশের ব্যবহার পরিবর্তন করতে চান:

padding-left: 7px; 
padding-right: 8px;

এই সেটিংটি ড্রপডাউন তালিকাটিকেও প্রভাবিত করে।

এটি প্রশ্নের উত্তর দেয় না তবে এটি অন্যদের যারা সিএসএসের সাথে গোলযোগ বা কম ভেরিয়েবল ব্যবহার করতে চান না তাদের সহায়তা করতে পারে। এই সমস্যাটি সমাধান করার জন্য দুটি সাধারণ পন্থা।

Answer 8

নবভার ছোট ডিভাইসে পতিত হবে। ভেঙে যাওয়ার বিন্দুটি ভেরিয়েবলগুলিতে @ গ্রিড-ফ্লোট-ব্রেকপয়েন্ট দ্বারা সংজ্ঞায়িত করা হয়। ডিফল্টরূপে এটি 768px এর আগে হবে। 768 পিক্সেল স্ক্রিনের প্রস্থের নীচের পর্দার জন্য, নাবারটি দেখতে পাবেন:

@ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্টটি পরিবর্তনশীল.বিহীন অবস্থায় পরিবর্তন করা এবং বুটস্ট্র্যাপ পুনরায় কম্পাইল করা সম্ভব। এটি করার সময় আপনাকে নেভিবার.বিহীন @ স্ক্রিন-এক্সএস-ম্যাক্স পরিবর্তন করতে হবে। আপনাকে এই মানটি আপনার নতুন @ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্ট -১ এ সেট করতে হবে। আরও দেখুন: https://github.com/twbs/bootstrap/pull/10465 । @ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্টে তাদের মোবাইল সংস্করণেও ন্যাবারবার ফর্ম এবং ড্রপডাউনগুলি পরিবর্তন করার জন্য এটি প্রয়োজন।

Comments

আপনি কীভাবে স্টাইলাস ব্যবহার করবেন? আপনি কি github.com/Acquisio/bootstrap-stylus ব্যবহার করেন ? শেষ ক্ষেত্রে আপনার উপরের মতো একই করা উচিত। বুটস্ট্র্যাপ-শৈলীগুলি ডাউনলোড করুন, স্টাইলাস / ভেরিয়েবলস.স্টাইল ইত্যাদিতে সেটিংস পরিবর্তন করুন এবং পুনরায় কম্পাইল করুন।

— বাস জোবসেন

Answer 9

বুটস্ট্র্যাপ কাস্টমাইজ করা থেকে রাস্তা রক্ষণাবেক্ষণ এবং আপগ্রেড সমস্যা সম্পর্কে আমি উদ্বিগ্ন। আমি আজই কাস্টমাইজেশন পদক্ষেপগুলি নথিভুক্ত করতে পারি এবং আশা করি যে ব্যক্তি এখন থেকে তিন বছর বুটস্ট্র্যাপ আপগ্রেড করবে সে ডকুমেন্টেশনটি খুঁজে পাবে এবং পদক্ষেপগুলি পুনরায় প্রয়োগ করবে (এটি সেই সময়ে কাজ করতে পারে বা নাও পারে)। আমি মনে করি যে কোনও উপায়েই যুক্তি দেওয়া যায়, তবে আমি আমার কোডটিতে কোনও পছন্দসই রাখা পছন্দ করি prefer

যদিও আমি Seb33300 এর পদ্ধতির কাজ করতে পারি তা বেশ বুঝতে পারি না। এটি অবশ্যই বুটস্ট্র্যাপ ৪.০.৩ এর সাথে কাজ করে নি। ন্যাভ বারটি 768 এর পরিবর্তে 1200 এ প্রসারিত হওয়ার জন্য, 768 এ প্রসারিত হওয়া এবং 1200 এ প্রসারিত বাহিনীকে আটকাতে উভয় গণমাধ্যমের প্রশ্নের নিয়মগুলি অবশ্যই ওভাররাইড করা উচিত।

আমার কাছে একটি দীর্ঘ মেনু রয়েছে যা পোর্ট্রেট মোডে আইপ্যাডে মোড়ানো হবে। নিম্নলিখিতগুলি 1200 ব্রেকপয়েন্ট পর্যন্ত মেনুটিকে ধসে যায়:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

Answer 10

আমি আমার বুটস্ট্র্যাপ install.০.০ ইনস্টল করে সিএসএস উপায়ে করেছি, যেহেতু আমি কমের সাথে পরিচিত নই। আমি আমার কাস্টম সিএসএস ফাইলে যুক্ত কোডটি এখানে রেখেছি (যা আমি বুটস্ট্র্যাপ সিএসএসের পরে লোড করি) যা আমাকে নিয়ন্ত্রণ করতে দেয় তাই মেনুটি সর্বদা একটি মতো কাজ করে accordion।
দ্রষ্টব্য: আমি আমার আচরণটি আলাদা navbarকরতে ক্লাসের সাথে sidebarআমার পুরোটি একটি ডিভের ভিতরে আবৃত করলাম যাতে এটি আমার মেনুটির মতো আমার সাইটে অন্যান্য নববারকে প্রভাবিত না করে। আপনার প্রয়োজন অনুসারে সামঞ্জস্য করুন, আশা করি এটি সহায়ক হবে।

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

অতিরিক্ত দ্রষ্টব্য: আমি প্রধান মেনুর টগলটিতেও একটি পরিবর্তন যুক্ত করেছি navbar(যেহেতু আমার সাইটের উপরের কোডটি পাশের "সাবমেনু" জন্য ব্যবহৃত হয়)।

আমি বদলে গেছি:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

মধ্যে:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

এবং তারপরেও সামঞ্জস্য:

<div class="navbar-collapse collapse navbar-collapse">

মধ্যে:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

আপনার যদি কেবলমাত্র navbarআমার কাছে ধারনা থাকে তবে আপনাকে এই সম্পর্কে উদ্বিগ্ন হওয়ার দরকার নেই, তবে এটি আমার ক্ষেত্রে আমাকে সহায়তা করেছিল।

Answer 11

আর যারা একটি প্রস্থ ধসে করতে চান তাদের জন্য কম মান 768px চেয়ে (ক প্রস্থ 768px কম সময়ে প্রসারিত) এই CSS প্রয়োজন হল:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Answer 12

আমি মনে করি আমি পতন ব্রেক ব্রেকপয়েন্ট পরিবর্তন করার একটি সহজ সমাধান পেয়েছি, কেবলমাত্র CSS এর মাধ্যমে।

আমি আশা করি অন্যরা এটির সত্যতা নিশ্চিত করতে পারে যেহেতু আমি এটির পুরোপুরি পরীক্ষা করে নিই এবং আমি নিশ্চিত না যে এই সমাধানটির কোনও পার্শ্ব প্রতিক্রিয়া আছে কিনা।

নিম্নলিখিত শ্রেণীর সংজ্ঞাগুলির জন্য আপনাকে মিডিয়া ক্যোয়ারির মানগুলি পরিবর্তন করতে হবে:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

এটি আমার বর্তমান প্রকল্পে আমার পক্ষে কাজ করেছে তবে সমস্ত পর্দার আকারের জন্য মেনুটি সঠিকভাবে সাজানোর জন্য আমার কিছু সিএসএস সংজ্ঞা পরিবর্তন করতে হবে।

আশাকরি এটা সাহায্য করবে.