বুটস্ট্র্যাপ 3 - নাবার দুর্যোগ অক্ষম করুন

Question

এটি আমার সাধারণ নাবার:

<div class="navbar navbar-fixed-top myfont" role="navigation">
    <div class="">
        <ul class="nav navbar-nav navbar-left">
            <li>
                <a class="navbar-brand" href="#">
                    <img src="assets/img/logo.png"/>
                </a>
            </li>
            <li>
                <button class="btn btn-navbar">
                    <i class="fa fa-edit"></i>
                    Create 
                </button>
            </li>
        </ul>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li data-match-route="/"><a href="#/page-one">Login</a></li>
        <li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
    </ul>
</div>

আমি কেবল এটিকে ধসে যাওয়া রোধ করতে চাই, কারণ আমার এটির প্রয়োজন নেই, কীভাবে করব?

আমি ডিফল্ট স্টাইলগুলিকে ওভাররাইড করার জন্য সিএসএসের 300K লাইন লেখা এড়াতে চাই।

যেকোনো পরামর্শ?

Answer 1

কাছাকাছি পরীক্ষা করার পরে, 300k লাইন নয় তবে প্রায় 3-4 টি সিএসএস বৈশিষ্ট্য রয়েছে যা আপনাকে ওভাররাইড করতে হবে:

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

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

এবং এটির সাথে আপনার মেনুটি ধসে পড়বে না।

ডেমো ( জেসফিডাল )

ব্যাখ্যা

সিএসএসের চারটি বৈশিষ্ট্য স্বতন্ত্র করে:

1. .collapseবুটস্ট্র্যাপে ডিফল্ট সম্পত্তি ট্যাবলেটগুলি (ল্যান্ডস্কেপ) এবং ফোনের জন্য মেনুর ডানদিকে লুকায় এবং পরিবর্তে একটি টগল বোতাম এটি লুকিয়ে / দেখানোর জন্য প্রদর্শিত হয়। সুতরাং এই সম্পত্তিটি ডিফল্টটিকে ওভাররাইড করে এবং অবিচ্ছিন্নভাবে সেই উপাদানগুলি দেখায়।

2. বাম-পাশের পাশাপাশি একই লাইনে ডানদিকের মেনুটি উপস্থিত হওয়ার জন্য আমাদের বাম দিকে ভাসমান বাম দিক প্রয়োজন।

3. এই সম্পত্তিটি বুটস্ট্র্যাপে ডিফল্টরূপে উপস্থিত রয়েছে তবে ফোন রেজোলিউশনে ট্যাবলেট (প্রতিকৃতি) এ নয়। আপনি এটিকে এড়িয়ে যেতে পারেন, এটি সম্ভবত আপনার সামগ্রিক নাবারকে প্রভাবিত করবে না।

4. এই ডানদিকে ডান-পাশের মেনু রাখে যখন ভেতরের উপাদান ( li) সম্পত্তি 2. সুতরাং আমরা ছেড়ে গেছেন-সাইড অনুসরণ করবে ভাসা বাম এবং ডান প্রান্তের ভাসা অধিকার যা তাদের এক লাইন মধ্যে এনেছে।

Comments

@gWo উত্তরে একটি ব্যাখ্যা যুক্ত করেছেন।

— আইআইবি

যদি এটি পর্যাপ্ত পরিমাণে চর্মসার হয়ে যায় তবে ভাসমান বাম এবং ভাসমান ডান উপাদানগুলি একে অপরের উপর আবৃত করতে পারে (আমি ulএস এর কথা বলছি না li)। এমন কি ঘটতে না পারে তার সর্বোত্তম উপায় কী?

— আহনিবিজ্যাকড

যদি আপনার একমাত্র প্রয়োজন হয় ইউএল / এলআই তালিকাটি উল্লম্ব হয়ে যাওয়া রোধ করে তবে ২ য় সিএসএস যা প্রয়োজন তা হল।

— জেমসবি

!importantআমার জন্য এটি ছাড়া কাজ করে বিবৃতি না প্রয়োজনীয় এখানে আছে। যখনই সম্ভব এগুলি এড়াতে চেষ্টা করুন (! গুরুত্বপূর্ণ)।

— টিম-এরউইন

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

— রাউবি

Answer 2

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

@grid-float-breakpointভেরিয়েবল.লেস এবং পুনরায় কম্পাইল করা বুটস্ট্র্যাপ পরিবর্তন করা সম্ভব । এটি করার সময় @screen-xs-maxআপনাকেও navbar.less এ পরিবর্তন করতে হবে । আপনাকে এই মানটি আপনার নতুনতে সেট করতে হবে @grid-float-breakpoint -1। আরও দেখুন: https://github.com/twbs/bootstrap/pull/10465 । @ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্টে তাদের মোবাইল সংস্করণেও ন্যাবারবার ফর্ম এবং ড্রপডাউনগুলি পরিবর্তন করার জন্য এটি প্রয়োজন।

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

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

 @grid-float-breakpoint

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

---

SAAS ব্যবহারকারীদের জন্য

আপনার কাস্টম ভেরিয়েবলগুলি এর $grid-float-breakpoint: 0px;আগে যুক্ত করুন@import "bootstrap.scss";

Comments

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

— ই

বুটস্ট্র্যাপ কাস্টমাইজেশন পৃষ্ঠাতে @ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্ট-ভেরিয়েবলের জন্য +1, এটি আমার পক্ষে কৌশলটি করেছে!

— ওয়েটস

SASS ব্যবহারকারীদের জন্য: কেবল লাইনের $grid-float-breakpoint: 0px;আগের মতো আপনার কাস্টম ভেরিয়েবলগুলি যুক্ত করুন@import "bootstrap.scss";

— দুভরাই

Answer 3

নেভিগেশনের নতুন বিভাগটিকে সর্বদা দৃশ্যমান থাকার অনুমতি দেওয়ার সময় এখানে এমন একটি দৃষ্টিভঙ্গি রয়েছে যা ডিফল্ট পতনের আচরণটি অপরিবর্তিত রাখে। এটি একটি বৃদ্ধি navbar; navbar-header-menuআমি তৈরি করা একটি সিএসএস ক্লাস এবং এটি বুটস্ট্র্যাপের যথাযথ অংশ নয়।

এটি navbar-headerপরে উপাদানটিতে রাখুন navbar-brand:

<div class="navbar-header-menu">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">I'm always visible</a></li>
    </ul>
    <form class="navbar-form" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

এই সিএসএস যুক্ত করুন:

.navbar-header-menu {
    float: left;
}

    .navbar-header-menu > .navbar-nav {
        float: left;
        margin: 0;
    }

        .navbar-header-menu > .navbar-nav > li {
            float: left;
        }

            .navbar-header-menu > .navbar-nav > li > a {
                padding-top: 15px;
                padding-bottom: 15px;
            }

        .navbar-header-menu > .navbar-nav .open .dropdown-menu {
            position: absolute;
            float: left;
            width: auto;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            border: 1px solid rgba(0,0,0,.15);
            -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
            box-shadow: 0 6px 12px rgba(0,0,0,.175);
        }

    .navbar-header-menu > .navbar-form {
        float: left;
        width: auto;
        padding-top: 0;
        padding-bottom: 0;
        margin-right: 0;
        margin-left: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .navbar-header-menu > .navbar-form > .form-group {
            display: inline-block;
            margin-bottom: 0;
            vertical-align: middle;
        }

    .navbar-header-menu > .navbar-left {
        float: left;
    }

    .navbar-header-menu > .navbar-right {
        float: right !important;
    }

    .navbar-header-menu > *.navbar-right:last-child {
        margin-right: -15px !important;
    }

ভাঁড়টি দেখুন: http://jsfiddle.net/L2txunqo/

কেভেট: navbar-rightউপাদানগুলিকে চাক্ষুষভাবে বাছাই করতে ব্যবহার করা যেতে পারে তবে স্ক্রিনের ডানদিকের অংশে উপাদানটি টানতে গ্যারান্টিযুক্ত নয়। ফিডালটি সেই আচরণটির সাথে প্রদর্শন করে navbar-form।

Answer 4

আপনি যদি কম সংস্করণ ব্যবহার না করে থাকেন তবে আপনার পরিবর্তন করতে হবে এমন লাইনটি এখানে:

@media (max-width: 767px) { /* Change this to 0 */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a {
    line-height: 20px;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
  }
}

Answer 5

নিম্নলিখিত সমাধানটি বুটস্ট্র্যাপ ৩.৩.৪ এ আমার জন্য কাজ করেছে:

সিএসএস:

/*no collapse*/

.navbar-collapse.collapse.off {
    display: block!important;
}
.navbar-collapse.collapse.off ul {
    margin: 0;
    padding: 0;
}

.navbar-nav.no-collapse>li,
.navbar-nav.no-collapse {
    float: left !important;
}

.navbar-right.no-collapse {
    float: right!important;
}

তারপরে তালিকাগুলির প্রত্যেকটিতে .ন -পতন ক্লাস এবং মূল ধারকটিতে .Of শ্রেণি যুক্ত করুন। এখানে জাদে লিখিত একটি উদাহরণ:

nav.navbar.navbar-default.navbar-fixed-top
        .container-fluid
            .collapse.navbar-collapse.off
                ul.nav.navbar-nav.no-collapse
                    li
                        a(href='#' class='glyph')
                            i(class='glyphicon glyphicon-info-sign')
                ul.nav.navbar-nav.navbar-right.no-collapse
                    li.dropdown
                        a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false')
                            | Tools
                            span.caret
                        ul.dropdown-menu(role='menu')
                            li
                                a(href='#') Tool #1
                    li
                        a(href='#')
                            | Logout

Answer 6

আর একটি উপায় হ'ল collapse navbar-collapseমার্কআপ থেকে সরানো । বুটস্ট্র্যাপ ৩.৩..7 সহ উদাহরণ

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-atp">
  <div class="container-fluid">
    <div class="">
      <ul class="nav navbar-nav nav-custom">
        <li>
          <a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>Nav item</li>
      </ul>
    </div>
  </div>
</nav>