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

Question

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

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

<div class="navbar navbar-fixed-top navbar-custom ">
  <div class="container" >
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Menu Item 1</a></li>
        <li><a href="#contact">Menu Item 2</a></li>
        <li><a href="#about">Menu Item 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

2019 আপডেট

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

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

Flexbox , স্বয়ংক্রিয় মার্জিন , এবং ক্রম ইউটিলিটি শ্রেণীর হিসাবে প্রয়োজন নেভিগেশনদণ্ড বিষয়বস্তু সারিবদ্ধ ব্যবহার করা যাবে। বড় পর্দা এবং মোবাইল / ধসে পড়া ভিউ উভয়টিতে নভবার আইটেমগুলির ক্রম এবং প্রান্তিককরণ (ব্র্যান্ড, লিঙ্কগুলি, টগলকারী) সহ অনেকগুলি বিষয় বিবেচনা করতে হবে। নাবারের জন্য গ্রিড ক্লাস (সারি, করল) ব্যবহার করবেন না ।

এখানে বিভিন্ন উদাহরণ ...

বাম, কেন্দ্র (ব্র্যান্ড) এবং ডান লিঙ্কগুলি:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Left</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="//codeply.com">Codeply</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Navbar 2</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

http://www.codeply.com/go/qhaBrcWp3v

কেন্দ্রের লিঙ্ক এবং ওভারলে লোগো চিত্র সহ আরেকটি বিএস 4 নবারবার বিকল্প :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-1 order-md-0">
        <ul class="navbar-nav ml-auto text-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto my-2 order-0 order-md-1 position-relative">
        <a class="mx-auto" href="#">
            <img src="//placehold.it/120/ccff00" class="rounded-circle">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 dual-collapse2 order-2 order-md-2">
        <ul class="navbar-nav mr-auto text-center">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

বা , এই অন্যান্য বুটস্ট্র্যাপ 4 প্রান্তিককরণের পরিস্থিতি:

ব্র্যান্ড বাম, মৃত কেন্দ্র লিঙ্ক, (খালি ডান)

---

ব্র্যান্ড এবং লিঙ্কগুলি কেন্দ্র, আইকনগুলি বাম এবং ডান

---

আরও বুটস্ট্র্যাপ 4 উদাহরণ :

টগলগার মোবাইলের বামে, ব্র্যান্ডের ডানদিকে
ব্র্যান্ড এবং মোবাইলের
ডানদিকে লিঙ্কগুলি ডেস্কটপে লিংকগুলি সারিবদ্ধ করুন, মোবাইল
বামে লিঙ্কগুলি কেন্দ্রের লিঙ্কগুলি এবং টগলকারী, সেন্টার ব্র্যান্ড, ডানদিকে অনুসন্ধান করুন

---

আরও দেখুন: বুটস্ট্র্যাপ 4 নব্বরের আইটেমগুলিকে
ডানদিকে প্রান্তিক করুন বুটস্ট্র্যাপ 4 নব্বারটি ডানদিকে বোতামের সাথে প্রান্তিককরণ করুন যা মোবাইল সেন্টারে পতিত হয়
না বুটস্ট্র্যাপ 4 ন্যাববারে একটি উপাদান

---

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

বিকল্প 1 - ব্র্যান্ড কেন্দ্র, বাম / ডান এনএভি লিঙ্কগুলি সহ:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

http://bootply.com/98314 (3.x)

---

বিকল্প 2 - বাম, কেন্দ্র এবং ডান ন্যাভ লিঙ্কগুলি:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-center">
        <li><a href="#">Center</a></li>
        <li><a href="#">Center</a></li>
      <li><a href="#">Center</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Right</a></li>
    </ul>
  </div>
</nav>

@media (min-width: 768px) {
  .navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
  }
}

http://www.bootply.com/SGYC6BWeBK

বিকল্প 3 - ব্র্যান্ড এবং লিঙ্ক উভয়কেই কেন্দ্র করুন

.navbar .navbar-header,
.navbar-collapse {
    float:none;
    display:inline-block;
    vertical-align: top;
}

@media (max-width: 768px) {
    .navbar-collapse  {
        display: block;
    }
}

http://www.codeply.com/go/1lrdvNH9GI

আরও উদাহরণ:

বাম ব্র্যান্ড, কেন্দ্রের লিঙ্কগুলি
বাম টগলগার, সেন্টার ব্র্যান্ড

3.x এর জন্যও ন্যাও-জায়েজ: বুটস্ট্র্যাপ সেন্টার ন্যাবার

---

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

Comments

আপনি কীভাবে বাম আইটেমগুলিকে বামে অন্য টগল করে ভেঙে ফেলতে পারেন?

— gepex

আমি 2 টি জিসফিল উদাহরণ তৈরি করেছি, যেহেতু বুটপ্লি এখনই কাজ করছে না। sol 1 এবং sol 2 । বিটিডব্লিউ, সলিউশন 2 আরও ভাল কাজ করে (

— imho

বুটস্ট্র্যাপ 4 এর জন্য, ফায়ারফক্স ব্যবহার করে, উদাহরণস্বরূপ # 1 কাজ করে না। .absশ্রেণিটি যুক্ত করার ফলে navbar-brandউপাদানগুলি বাম এবং ডানদিকে বোতামগুলি আবরণে পরিণত হয় এবং এগুলি অস্বাচ্ছন্দ্যকর করে তোলে

— 8

কিভাবে এটি উত্তর হিসাবে চিহ্নিত করা হয় না? বিএস 3 এবং 4 এর জন্য 3 টি বিকল্প দেয়, ধন্যবাদ স্যার।

— মুরকান্তিলিজম

আপনার কোডডলি লিঙ্কগুলির কোনওটিই খুলছে না এবং এটি সেই ওয়েবসাইটটিতে ব্যবহৃত ভয়ঙ্কর ডিজাইনের কারণে। তারা সমস্ত ধরণের বিজ্ঞাপন, গ্রাফকিউএল ... একসাথে মিশ্রিত করে এবং যদি কোনও লোড বা ব্লক করতে ব্যর্থ হয় তবে পুরো পর্দা ফাঁকা থাকবে। হ্যাঁ এটিই কৌণিকভাবে কাজ করে (বা কাজ করে না)।

— এএএ

Answer 2

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

আমাদের কাছে NavBars আইটেমগুলি সারিবদ্ধ করার বিভিন্ন উপায় রয়েছে।

বাম সারিবদ্ধ জন্য

শ্রেণী = "নাবার-নাভ মিঃ-অটো "

ডান সারিবদ্ধ জন্য

শ্রেণি = "নাবার-নাভ মিলি-অটো "

কেন্দ্র সারিবদ্ধ জন্য

শ্রেণি = "নাবার-নাভ এমএক্স-অটো "

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a routerLink="/" class="navbar-brand" href="#">Bootsrap 4</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact">Contact us</a>
</li>
</ul>
</nav>

Comments

বি-এনভি-আইটেম ট্যাগে ক্লাস = "নাবার-ব্র্যান্ড এমএক্স-অটো" যুক্ত করা আমার

— পক্ষে কৌশলটি

Answer 3

আমার অনুরূপ কিছু দরকার ছিল (বাম, কেন্দ্র এবং ডান প্রান্তিকৃত আইটেম), তবে কেন্দ্রিক আইটেমগুলিকে সক্রিয় হিসাবে চিহ্নিত করার ক্ষমতা সহ। আমার জন্য যা কাজ করেছিল তা হ'ল:

http://www.bootply.com/CSI2KcCoEM

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Left 1</a></li>
      <li class="navbar-left"><a href="#">Left 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center 2</a></li>
      <li><a href="#">Center 3</a></li>
      <li class="navbar-right"><a href="#">Right 1</a></li>
      <li class="navbar-right"><a href="#">Right 2</a></li>
    </ul>
  </div>
</nav>

সিএসএস:

@media (min-width: 768px) {
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar-nav > li {
    float: none;
    display: inline-block;
  }
  .navbar-nav > li.navbar-right {
    float: right !important;
  }
}

Comments

এটি বেশ কাছাকাছি, তবে এটি ভেঙে পড়লে তা ভেঙে যায়। আপনি যদি এটি কোনও মোবাইল ডিভাইসে দেখেন তবে "ব্র্যান্ড" মেনু বারের নীচে প্রদর্শিত হবে। ব্র্যান্ড কি প্রকৃত নাভির অংশ নয়?

— স্পাস্টিনিঞ্জ

এটি ওপিকে আরও কাছ থেকে উত্তর দেয়।

— রজার ডিউক

এখনও পর্যন্ত এটি আমার পক্ষে কাজ করেছে। আমার কাছে ব্র্যান্ড বা ডান প্রান্তিক উপাদান নেই, কেবলমাত্র 3 টি কেন্দ্রিক বিকল্প। ধন্যবাদ

— আলেসান্দ্রো

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

— কোনওটিই নাবারের

Answer 4

বুটস্ট্র্যাপ 4 (আলফা 6 হিসাবে)

ফ্লেক্সবক্স দিয়ে তৈরি করা হয়েছে নববার! ফ্লোটের পরিবর্তে, আপনার ফ্লেক্সবক্স এবং মার্জিন ইউটিলিটিগুলির প্রয়োজন।

ডানদিকে সারিবদ্ধ ব্যবহারের জন্য justify-content-endউপর collapseDIV আছে:

<div class="collapse navbar-collapse justify-content-end">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
  </ul>
</div>

এখানে সম্পূর্ণ উদাহরণ: https://jsbin.com/kemawa/edit?output

Comments

আমার জন্য কাজ করে না ... ন্যায়সঙ্গত-সামগ্রী-শেষটি নাভির জন্য প্রযোজ্য বলে মনে হয় এবং এটি নাবারের জন্য কাজ করছে বলে মনে হয় না এটি বুটস্ট্র্যাপের সর্বশেষতম সংস্করণ।

— স্টিফেন প্যাকেট 22'17

@ স্টাফেনপ্যাকেট, এটি আলফা 6 এর জন্য প্রযোজ্য (সবচেয়ে সাম্প্রতিক বুটস্ট্র্যাপ রিলিজ) - আপনি কী ব্যবহার করছেন?

— জেরেমি লিঞ্চ

Answer 5

আমার মাথাটি ধুয়ে ফেলুন, কেবল আমার উত্তরটি আবার পড়ুন এবং বুঝতে পারলেন যে ওপি একটি কেন্দ্র মেনু দিয়ে ডানদিকে বাম দিকে দুটি লোগোর জন্য চাইছে, অন্যদিকে নয় way

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

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand navbar-left"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  </div>
  <div class="navbar-brand navbar-right"><a href="#"><img src="http://placehold.it/150x30"></a></div>

  <div class="navbar-collapse collapse">
    <ul class="nav nav-justified">
        <li><a href="#">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
  </div>
</nav>

বুটপ্লি: http://www.bootply.com/W6uB8YfKxm

---

যারা এখানে "ব্র্যান্ড" কেন্দ্র করে দেখার চেষ্টা করেছেন তাদের জন্য আমার পুরানো উত্তর:

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

.navbar-center
{
   position: absolute;
   width: 100%;
   left: 0;
   text-align: center;
   margin: auto;
}

.navbar-brand{
   float:none;
}

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

তাই আমি যা করেছি তা হ'ল ব্র্যান্ড ব্লকের একাধিক সংস্করণ তৈরি করতে বুটস্ট্র্যাপ প্রতিক্রিয়াশীল ইউটিলিটিগুলি ব্যবহার করা হয়েছিল :

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <div class="navbar-brand visible-xs"><a href="#">Brand That is Really Long</a></div>
</div>
<div class="navbar-brand visible-sm text-center"><a href="#">Brand That is Really Long</a></div>
<div class="navbar-brand navbar-center hidden-xs hidden-sm"><a href="#">Brand That is Really Long</a></div>

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-left">
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
      <li><a href="#">Left</a></li>
      <li><a href="#about">Left</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
    <li><a href="#about">Right</a></li>
    <li><a href="#contact">Right</a></li>
  </ul>
</div>

সুতরাং এখন এলজি এবং এমডি ভিউপোর্টগুলির ব্র্যান্ডটি বাম এবং ডানদিকে লিঙ্কযুক্ত রয়েছে, একবার আপনি এসএম ভিউপোর্টে পৌঁছে গেলে আপনার লিঙ্কগুলি পরের লাইনে নেমে যায় যাতে আপনি আপনার ব্র্যান্ডের সাথে ওভারল্যাপ না করে এবং অবশেষে xs এ যান ভিউপোর্টটি সঙ্কুচিতভাবে লাথি মারে এবং আপনি টগলটি ব্যবহার করতে সক্ষম হন। আপনি এটিকে আরও একধাপ এগিয়ে নিয়ে যেতে পারেন এবং নাবারবার-ব্র্যান্ডের সাথে ব্যবহার করার সময় নভবার-ডান এবং নাবারবার-বামের জন্য মিডিয়া প্রশ্নগুলি সংশোধন করতে পারেন যাতে এসএম ভিউপোর্টে লিঙ্কগুলি সমস্ত কেন্দ্রিক হয় তবে তা দেখার জন্য সময় পায় না।

আপনি আমার পুরাতন বুটপ্লি এখানে পরীক্ষা করতে পারেন: www.bootply.com/n3PXXropP3

আমার ধারণা, 3 টি ব্র্যান্ড থাকা "জেড" এর মতোই ঝামেলা হতে পারে তবে প্রতিক্রিয়াশীল ডিজাইনের বিশ্বে এই সমাধানটি আমার স্টাইলটি আরও ভাল ফিট করে।

Answer 6

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

.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    margin: auto;
    margin-left: 48%;
}

Answer 7

এটি একটি তারিখযুক্ত প্রশ্ন তবে বুটস্ট্র্যাপ গিথুব পৃষ্ঠা থেকে সরাসরি ভাগ করার জন্য আমি একটি বিকল্প সমাধান পেয়েছি। ডকুমেন্টেশন আপডেট করা হয়নি এবং কিছু অন্যান্য প্রশ্ন থাকা সত্ত্বেও একই সমাধানের জন্য জিজ্ঞাসা করে অন্যান্য প্রশ্ন রয়েছে। এই সমাধানটি আপনার ক্ষেত্রে সুনির্দিষ্ট নয় তবে আপনি দেখতে পাচ্ছেন যে সমাধানটি <div class="container">পরে ঠিক আছে <nav class="navbar navbar-default navbar-fixed-top">তবে <div class="container-fluid"প্রয়োজনের সাথে প্রতিস্থাপনও করা যেতে পারে ।

<!DOCTYPE html>
<html>

<head>
  <title>Navbar right padding broken </title>
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#/" class="navbar-brand">Hello</a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">

        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="btn-group navbar-btn" role="group" aria-label="...">
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogin">Se connecter</button>
              <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalSignin">Créer un compte</button>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

সমাধানটি এই পৃষ্ঠায় একটি মূর্খায় পাওয়া গেছে: https://github.com/twbs/bootstrap/issues/18362

এবং ভি 3-তে স্থির হবে না হিসাবে তালিকাভুক্ত।

Answer 8

<div class="d-flex justify-content-start">hello</div>    
<div class="d-flex justify-content-end">hello</div>
<div class="d-flex justify-content-center">hello</div>
<div class="d-flex justify-content-between">hello</div>
<div class="d-flex justify-content-around">hello</div>

উপরের বিভাগ অনুযায়ী ডান বা বামে আপনি যে ক্ষেত্রগুলি কেন্দ্র করতে চান তা রাখুন।

Answer 9

আপনি ডানদিকে যেতে চান সেই বিভাগে আপনি মার্জিনটি বামে অটো -> মিল-অটোতে সেট করেছেন।

 <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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  <div class="navbar-nav ml-auto"> !<--MARGIN LEFT AUTO HERE !-->
    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</div>

Answer 10

সহজ সমাধান:

কেবল navbarকলামগুলিতে বিভক্ত করুন : উদাহরণস্বরূপ, আপনার যদি সমস্তর উপরে 24 টি কলাম থাকে তবে 12 টি খালি হয়ে যাবে এবং 12 টি নভবারকে সঙ্কুচিত করতে চলেছে:

<nav class="navbar navbar-default">
    <div class="row">
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>
       <div class="col-sm-4"></div>

       <div class="col-sm-12">
           <ul class="nav navbar-nav" align="center">
              <li><a href="#">Home</a></li>
              <li><a href="#">First Link</a></li>
              <li><a href="#">Second Link</a></li>
              <li><a href="#">Third Link</a></li>
              <li><a href="#">Fourth Link</a></li>
           </ul>
       </div>
    </div>
</nav>

Comments

গ্রাড সারি এবং কলটি নববারের অভ্যন্তরে ব্যবহার করা উচিত নয়। সমর্থিত সামগ্রী ব্যবহার করুন ।

— জিম

@ জিম কেন না, এটার মধ্যে কী খারাপ?

— পার্সিকার