বুটস্ট্র্যাপ 4 ডানদিকে নভবার আইটেমগুলি সারিবদ্ধ করুন

Question

আমি কীভাবে ডানদিকে কোনও নভবার আইটেমটি সারিবদ্ধ করব?

আমি লগইন এবং ডান নিবন্ধন করতে চাই। তবে আমি যা চেষ্টা করি তা কাজ করে বলে মনে হয় না।

আমি এ পর্যন্ত চেষ্টা করেছি:

• <div>কাছাকাছি কাছাকাছি <ul>:style="float: right"
• <div>কাছাকাছি কাছাকাছি <ul>:style="text-align: right"
• <li>ট্যাগগুলিতে এই দুটি জিনিস চেষ্টা করে
• !importantশেষ পর্যন্ত যুক্ত করে আবার সেই সমস্ত জিনিস চেষ্টা করে দেখুন
• পরিবর্তিত nav-itemকরার nav-rightমধ্যে<li>
• একটি pull-sm-rightক্লাস যুক্ত<li>
• একটি align-content-endক্লাস যুক্ত<li>

এটি আমার কোড:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

Comments

নাভাবারগুলি আলফা 6 সংস্করণ থেকে ফ্লেক্সবক্স দিয়ে নির্মিত।

— সর্বোচ্চ

হ্যাঁ, তাই ডানদিকে সারিবদ্ধ করার জন্য আমার কী করতে হবে। আমি ইতিমধ্যে কোনও ভাগ্য ছাড়াই কয়েকটি ফ্লেক্সবক্স জিনিস চেষ্টা করেছি। : /

— লুউক ওউইজস্টার

Answer 1

বুটস্ট্র্যাপ 4 হয়েছে অনেক সারিবদ্ধ NavBar আইটেম বিভিন্ন উপায়ে । float-rightনাবার এখন হওয়ায় কাজ করবে না flexbox।

আপনি 1 ম (বাম) এ mr-autoঅটো রাইট মার্জিনের জন্য ব্যবহার করতে পারেন । বিকল্পভাবে , ২ য় (ডান) ব্যবহার করা যেতে পারে , বা যদি আপনার কেবলমাত্র একটি থাকে ।navbar-navml-autonavbar-navnavbar-nav

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/login') }}">Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{{ url('/register') }}">Register</a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

এছাড়াও রয়েছে ফ্লেক্সবক্স ইউটিস। এই ক্ষেত্রে, আপনি 2 আছে navbar-navগুলি, তাই justify-content-betweenমধ্যে navbar-collapseতাদের মধ্যে এমনকি স্থান কাজ করবে,

 <div class="navbar-collapse collapse justify-content-between">
     <ul class="navbar-nav mr-auto">
               ..
     </ul>
     <ul class="navbar-nav">
           ..
     </ul>
 </div>

---

বুটস্ট্র্যাপ 4.0 এবং আরও নতুনর জন্য আপডেট

বুটস্ট্র্যাপ 4 বিটা হিসাবে, ml-autoএখনও আইটেমগুলি ডানদিকে ঠেলাতে কাজ করবে। navbar-toggleable-ক্লাসে পরিবর্তিত হয়েছে কেবল সচেতন হনnavbar-expand-*

বুটস্ট্র্যাপ 4-এর জন্য আপডেট করা নববার

---

আর একটি ঘন ঘন বুটস্ট্র্যাপ 4 ন্যাবার ডান প্রান্তিককরণ দৃশ্যে ডানদিকে একটি বোতাম অন্তর্ভুক্ত রয়েছে যা মোবাইল সংঘর্ষ ন্যাভের বাইরে থাকে যাতে এটি সর্বদা প্রস্থে প্রদর্শিত হয়।

ডান সারিবদ্ধ বোতাম যা সর্বদা দৃশ্যমান

---

সম্পর্কিত: বাম, কেন্দ্র বা ডান সারিবদ্ধ আইটেমগুলির সাথে বুটস্ট্র্যাপ নাভবার

Comments

mr-autoডান-সর্বাধিক আইটেমটি যদি কাজ করে না dropdown। ড্রপডাউন আইটেমগুলি পৃষ্ঠার ডান প্রান্তে ছড়িয়ে পড়ে।

— এজ এরজোজ

এটি কাজ করে: codeply.com/go/P0G393rzfm - সমস্যাটি ডান প্রান্তিককরণmr-auto সম্পর্কে যা প্রশ্ন কাজ করে তা তেমন সমস্যা নয় । ড্রপডাউন নিয়ে আপনার যদি উদ্বেগ থাকে তবে একটি নতুন প্রশ্ন পোস্ট করুন, তবে আপনি সম্ভবত এই সমস্যাটি উল্লেখ করছেন: স্ট্যাকওভারফ্লো

— জিম

আপনি .dropdown-menu-rightনাবারটিতে ডান-সংযুক্ত ড্রপডাউনগুলিতে যুক্ত করতে পারেন । এটি না করা নির্দিষ্ট প্রস্থে ড্রপডাউন কেটে ফেলতে পারে।

— rybo111

@ জিমসিস্টেম আপনার উত্তরের জন্য আপনাকে ধন্যবাদ। আমি এখানে আপনার উত্তর অনুসরণ করছি stackoverflow.com/questions/19733447/… । আমার একটি প্রশ্ন আছে যে আমি কীভাবে একটি জিনিস বাম দিকে রাখতে এবং একটি আইটেমটি ডান পাশে রাখতে পারি?

— লোকেশ পান্ডে

ইন codeply.com/go/P0G393rzfm , আপনি বাম এক উল এবং ডান দিকে এক উল দেখানো গেছেন। প্রথমটিতে এমআর-অটো যুক্ত করে এটি অর্জন করা হয়েছিল । তবে আমার যদি কেবল একটি উল হয়? আমি অন্য একটি ডানদিকে সারিবদ্ধ করার জন্য একটি খালি উল তৈরি করতে চাই না।

— সন্তোষ কুমার

Answer 2

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

<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Sign Out</a>
    </li>
  </ul>
</div>

সুতরাং, আপনি justify-content-endডিভ যোগ করতে হবে এবং mr-autoতালিকায় বাদ দিতে হবে।

এখানে একটি কাজের উদাহরণ ।

Comments

@numediaweb ওপিএস উদাহরণে, তিনি নেভের মধ্যে দুটি উপাদান ব্যবহার করেন, একটি বাম এবং একটি ডান সারিবদ্ধ করে; যেখানে আমি কেবল একটি ব্যবহার করেছি এবং এটি ডানদিকে প্রান্তিককরণ করেছি। এটি সঠিক উত্তর নয় তবে এটি প্রশ্নের সামান্যতম পরিবর্তনের উত্তর হিসাবে সহায়ক;)

— ক্রেগ ভ্যান টন্ডার

এটি একটি একক নাবার-নাভির জন্য কাজ করে তবে বুটস্ট্র্যাপ ডক্সে mr-autoপদ্ধতিটি ব্যবহৃত হয় ।

— জিম

mr-autoডক্সে ব্যবহৃত হয়, তবে আইটেমগুলি বামে সারিবদ্ধ করার জন্য নয়। এই উত্তরটি নিবন্ধে উল্লিখিত হিসাবে শব্দার্থগতভাবে সঠিক: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— Qwaz

প্রশ্নটি হল আপনি 2 লিঙ্কের তালিকা বা 1 সারিবদ্ধ করার চেষ্টা করছেন। যদি কেবল 1 হয়, আপনার উত্তরটি কাজ করে এবং আমার পক্ষে খুব সহায়ক হয়েছিল। ধন্যবাদ!

— খালি পায়ে 21

এটি আমার পক্ষে কাজ করেছে, তবে কেন জানি না যে এই উত্তরের উত্তরটি কেন কাজ করে না।

— সুহাইল আখতার

Answer 3

যারা এখনও বিএস 4 এ এই সমস্যাটির সাথে লড়াই করছেন তাদের জন্য কেবল কোডের নীচে চেষ্টা করুন -

<ul class="navbar-nav ml-auto">

Comments

না - যা সবকিছু ডানদিকে প্রান্তিক করে তোলে। প্রশ্নটি বলে যে তিনি কেবল একটি আইটেম ডানদিকে প্রান্তিককরণ করতে চান।

— নিকজি

m*-autoআপনি ক্লাসটি কোথায় রেখেছেন তার উপর নির্ভর করে বিষয়বস্তুটি বাম বা ডানদিকে ধাক্কা দেয় সে সম্পর্কে অফিসিয়াল ডকটি পরীক্ষা করে দেখুন

— পিয়েরে লেস্পিনে

@ পিয়ারডেলেস্পিনে, হ্যাঁ ml-autoবিষয়বস্তুটিকে সর্বাপেক্ষা উপযুক্ত অবস্থানের দিকে ঠেলে দেয়, তবে আমি কেবল ভাবছি কেন mr-0কাজটি করতে পারছেন না?

— অ্যাভোকাডো

Answer 4

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

আপনি আপনার বাম সারিবদ্ধ ব্র্যান্ড এবং ডানদিকে সব NavBar আইটেম করতে চান তাহলে, ডিফল্ট পরিবর্তন mr-autoকরতেml-auto

<ul class="navbar-nav ml-auto">

Answer 5

চালু আছে Bootsrap 4.0.0-beta.2, এখানে তালিকাভুক্ত উত্তরগুলির মধ্যে আমার পক্ষে কাজ করা হয়নি। শেষ অবধি, বুটস্ট্র্যাপ সাইটটি সমাধানটি আমাকে তার ডকের মাধ্যমে নয়, তবে এর পৃষ্ঠার উত্স কোডের মাধ্যমে দিয়েছে ...

Getbootstrap.com সারিবদ্ধ তাদের অধিকার navbar-navনিম্নলিখিত বর্গ সাহায্যে ডানে: ml-md-auto।

Comments

আমার জন্য সুন্দর কাজ করেছেন। অন্য কিছু করেনি।

— মারিয়া ক্যাম্পবেল

Answer 6

ন্যায্যতা-কনটেন্ট-এন্ড প্রয়োগ করার পরে ml-autoপরিবর্তে ব্যবহার করুনmr-autonavul

Answer 7

আইটেমগুলি ডানে সরাতে এই কোডটি ব্যবহার করুন।

<div class="collapse navbar-collapse justify-content-end">

Comments

আপনার কোনও ধসে পড়া মেনু থাকলে এটি কাজ করবে না, তবে, এমএল-অটো দিয়ে এটি এখনও কাজ করবে কারণ মেনুটি ধসে গেলে <li> আইটেমগুলি এখনও প্রস্থের 100% নেয় তাই কোনও মার্জিন প্রয়োগ করা হবে না।

— রায়ান এস

Answer 8

আপনি যদি আপনার তাত্ক্ষণিকের পরে বাম দিকে হোম, বৈশিষ্ট্য এবং মূল্য নির্ধারণ করতে চান nav-brandএবং লগইন করুন এবং ডানদিকে নিবন্ধন করুন তবে দুটি তালিকা মোড়ানো <div>এবং ব্যবহার করুন .justify-content-between:

<div class="collapse navbar-collapse justify-content-between">
<ul>....</ul>
<ul>...</ul>
</div>

Answer 9

এখানে কেবল mr-autoক্লাস যুক্ত করুন ul:

<ul class="nav navbar-nav mr-auto">

আপনার উভয় পক্ষের মেনু তালিকা থাকলে আপনি এই জাতীয় কিছু করতে পারেন:

<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
<ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">left 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">left 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">left disable</a>
  </li>
</ul>

Answer 10

ফ্লেক্স-সারি-বিপরীত ক্লাস ব্যবহার করুন

<nav class="navbar navbar-toggleable-md navbar-light">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
            <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
        </a>
        <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
            <ul class="navbar-nav">
                <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                <li><a class="nav-item nav-link" href="#">About</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 11

এটি বুস্ট্র্যাপ ৪-এ সামান্য পরিবর্তন nav নভবারকে ডান পাশে সারিবদ্ধ করতে আপনাকে কেবল দুটি পরিবর্তন করতে হবে। তারা হ'ল:

1. মধ্যে navbar-navবর্গ অ্যাড w-100হিসাবে navbar-nav w-100100 যেমন প্রস্থ করতে
2. মধ্যে nav-item dropdownবর্গ অ্যাড ml-autoহিসাবে nav-item dropdown ml-autoমার্জিন স্বয়ংক্রিয় যেমন বাম করা।

যদি আপনি বুঝতে না পারেন, দয়া করে আমি এটির সাথে সংযুক্ত ছবিটি দেখুন।

কোডপেন লিংক

সম্পূর্ণ উত্স কোড

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown ml-auto">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>  
  </div>
</nav>

Answer 12

বুটস্ট্র্যাপ ৪.৩.১ এর জন্য, আমি ন্যাভ-পিলগুলি ব্যবহার করছিলাম এবং এগুলি ছাড়া আমার পক্ষে কিছুই কার্যকর হয়নি:

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>

Answer 13

বুটস্ট্র্যাপ v4.3 সালে শুধু যোগ ml-autoমধ্যে <ul class="navbar-nav"> উদা:<ul class="navbar-nav ml-auto">

Answer 14

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

<div id="header" class="header">
  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a class="navbar-brand" href="#">
          <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
          <span class="navbar-logo-text">Oncoscape</span>
        </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class="navbar-nav float-left">
        <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
          <span class="fa fa-dashboard"></span>Dashboard
        </a>
        <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
          <span class="fa fa-comments"></span>Feedback
        </a>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
          </a>
          <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" (click)="toProfile()">Account</a>
            <div class="dropdown-item">
              <app-login></app-login>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
<router-outlet></router-outlet>

Answer 15

বুটস্ট্র্যাপ 4 বিটার জন্য, উপাদানগুলির ডান পাশের সাথে সংযুক্ত থাকা স্যাম্পল নভবারটি হ'ল:

<div id="app" class="container">
  <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
</div>

Answer 16

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

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav  " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>

অন্যান্য স্থান অন্তর্ভুক্ত থাকতে পারে

fixed- top
    fixed bottom
    sticky-top

Answer 17

বিএসের কার্যকরী উদাহরণ v4.0.0-beta.2:

<body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
          </li>
        </ul>
      </div>
    </nav>


    <div class="container-fluid">
      container content
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>

Answer 18

উপরের সমস্তটি যদি ব্যর্থ হয় তবে আমি সিএসএসে নববার শ্রেণিতে 100% প্রস্থ যুক্ত করেছি। ততক্ষণে মিঃ অটো আমার কাছে এই প্রকল্পে ৪.১ ব্যবহার করে কাজ করছিল না।

Answer 19

ভার্ন্ডর-উপসর্গ.বিহীন 69 লাইনটি সন্ধান করুন এবং এটি নীচে লিখুন:

.panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

Answer 20

এটি প্রকাশিত সংস্করণ 4 এর জন্য একটি getbootstrap পৃষ্ঠা থেকে কেবল অনুলিপি করেছেন যা উপরের তুলনায় অনেক ভাল কাজ করেছে

<div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
         <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
         <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
         <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
         <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
</div> 

Answer 21

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

.hidden {
  display:none;
  } 
  
 #loginButton{
 
 margin-right:2px;
 
 }

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">NavBar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active hidden">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item hidden">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
  </div>
</nav>