Bootstrap 4 จัดตำแหน่งรายการ navbar ทางด้านขวา

341

ฉันจะจัดตำแหน่งรายการ navbar ให้ถูกต้องได้อย่างไร?

ฉันต้องการเข้าสู่ระบบและลงทะเบียนทางด้านขวา แต่ทุกสิ่งที่ฉันลองดูเหมือนจะไม่ทำงาน

นี่คือสิ่งที่ฉันได้ลองไปแล้ว:

<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>

— Luuk Wuijster
แหล่งที่มา

Navbars สร้างด้วย flexbox จากรุ่นอัลฟ่า 6

— สูงสุด

1

ใช่ฉันต้องทำอย่างไรเพื่อให้มันอยู่ในแนวที่ถูกต้อง ฉันลองทำ flexbox สองสามอย่างโดยไม่มีโชค : /

— Luuk Wuijster

530

Bootstrap 4มีหลายวิธีที่แตกต่างกับรายการ navbar ชิด float-rightจะไม่ทำงานเพราะ navbar flexboxอยู่ในขณะนี้

คุณสามารถใช้mr-autoสำหรับขอบขวาอัตโนมัติในวันที่ 1navbar-nav (ซ้าย) อีกทางเลือกหนึ่ง , ml-autoสามารถนำมาใช้ในครั้งที่ 2 (ขวา) หรือถ้าคุณมีเพียงหนึ่งเดียวnavbar-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

นอกจากนี้ยังมี utlet flexbox ในกรณีนี้คุณมี 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>

อัปเดตสำหรับ Bootstrap 4.0 และใหม่กว่า

ในฐานะของ Bootstrap 4 เบต้าml-autoจะยังคงทำงานเพื่อผลักรายการไปทางขวา เพียงแค่ระวังให้navbar-toggleable-ชั้นเรียนเปลี่ยนไปnavbar-expand-*

อัพเดทnavbar ที่ถูกต้องสำหรับ Bootstrap 4

สถานการณ์การจัดตำแหน่งด้านขวาของ Bootstrap 4 Navbar บ่อยครั้งอื่นรวมถึงปุ่มทางด้านขวาที่ยังคงอยู่นอก nav ยุบมือถือเพื่อที่จะแสดงในทุกความกว้างเสมอ

ปุ่มจัดตำแหน่งด้านขวาที่มองเห็นได้เสมอ

ที่เกี่ยวข้อง: Bootstrap NavBar กับรายการตรงกลางซ้ายหรือขวา

— ซิม
แหล่งที่มา

1

mr-autodropdownไม่ทำงานถ้าขวาสุดเป็นรายการ รายการแบบเลื่อนลงกระจายไปที่ขอบด้านขวาของหน้า

— Ege Ersoz

6

ใช้งานได้: codeply.com/go/P0G393rzfm - ปัญหาไม่ได้mr-autoเป็นคำถามที่เกี่ยวกับการจัดตำแหน่งที่ถูกต้องซึ่งทำงานได้ โพสต์คำถามใหม่ถ้าคุณมีความกังวลเกี่ยวกับการเลื่อนลง แต่คุณมีโอกาสมากที่สุดหมายถึงปัญหานี้: stackoverflow.com/questions/43867258/...

— ซิม

2

นอกจากนี้คุณยังสามารถเพิ่ม.dropdown-menu-rightลงในรายการแบบหล่นลงชิดขอบขวาใน navbar การไม่ทำเช่นนั้นสามารถตัดการเลื่อนลงที่ความกว้างที่แน่นอน

— rybo111

@ZimSystem ขอบคุณสำหรับคำตอบของคุณ ฉันได้รับการต่อไปนี้คำตอบของคุณมากกว่าที่นี่stackoverflow.com/questions/19733447/... ฉันมีคำถามว่าฉันจะบรรลุรายการหนึ่งทางด้านซ้ายได้อย่างไรและรายการหนึ่งทางด้านขวาได้อย่างไร

— Lokesh Pandey

ในcodeply.com/go/P0G393rzfmคุณได้แสดง ul หนึ่งอันทางซ้ายและ ul หนึ่งอันทางด้านขวา ซึ่งทำได้โดยการเพิ่มmr-autoเข้าไปในอันแรก แต่ถ้าฉันมี ul เพียงตัวเดียวล่ะ ฉันไม่ต้องการสร้าง ul ที่ว่างเปล่าเพียงเพื่อจัดเรียงอีกอันไปทางขวา

— Santosh Kumar

140

ในกรณีของฉันฉันต้องการปุ่ม / ตัวเลือกการนำทางเพียงชุดเดียวและพบว่าสิ่งนี้จะทำงาน:

<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ใน div และละเว้นmr-autoในรายการ

นี่คือตัวอย่างการทำงาน

— Craig van Tonder
แหล่งที่มา

3

@numediaweb ในตัวอย่าง OPs เขาใช้สององค์ประกอบภายใน nav โดยจัดหนึ่งซ้ายและขวาหนึ่งรายการ ที่ฉันใช้เพียงอันเดียวและจัดแนวไปทางขวา มันไม่ได้เป็นคำตอบที่ถูก แต่ก็เป็นประโยชน์เป็นคำตอบการเปลี่ยนแปลงเล็กน้อยของคำถามที่;)

— เครกแวน Tonder

งานนี้สำหรับคนเดียว navbar-nav แต่mr-autoวิธีการที่ใช้ในเอกสาร Bootstrap

— ซิม

mr-autoใช้ใน docs แต่ไม่จัดเรียงรายการทางด้านซ้าย คำตอบนี้ถูกต้องตามความหมายตามที่กล่าวไว้ในบทความนี้: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6

— qwaz

คำถามคือคุณพยายามจัดรายการลิงก์ 2 รายการหรือ 1 ถ้าเพียง 1 คำตอบของคุณใช้ได้และเป็นประโยชน์กับฉันมาก ขอบคุณ!

— barefootsanders

มันใช้งานได้สำหรับฉัน แต่ฉันไม่รู้ว่าทำไมคำตอบข้างต้นนี้ไม่ทำงาน

— Suhail Akhtar

59

สำหรับผู้ที่ยังคงดิ้นรนกับปัญหานี้ใน BS4 เพียงลองรหัสด้านล่าง -

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

— มูฮัมหมัดตาริก
แหล่งที่มา

7

ไม่ - ที่จัดทุกอย่างไปทางขวา คำถามบอกว่าเขาต้องการจัดตำแหน่งรายการเดียวทางด้านขวาเท่านั้น

— NickG

2

ตรวจสอบเอกสารอย่างเป็นทางการเกี่ยวกับm*-autoมันผลักเนื้อหาไปทางซ้ายหรือขวาขึ้นอยู่กับที่คุณใส่ชั้นเรียน

— Pierre de LESPINAY

@PierredeLESPINAY ใช่ml-autoผลักเนื้อหาไปยังตำแหน่งที่ถูกต้อง แต่ฉันแค่สงสัยว่าทำไมถึงmr-0ไม่สามารถทำงานได้?

— อะโวคาโด

42

บน Bootstrap 4

หากคุณต้องการจัดตำแหน่งแบรนด์ให้อยู่ทางซ้ายและรายการ navbar ทั้งหมดไปทางขวาให้เปลี่ยนค่าเริ่มต้นmr-autoเป็นml-auto

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

— เซบาสเตียน
แหล่งที่มา

32

บนBootsrap 4.0.0-beta.2ไม่มีคำตอบที่ระบุไว้ที่นี่ใช้ได้สำหรับฉัน ในที่สุดเว็บไซต์ Bootstrap ให้การแก้ปัญหาแก่ฉันไม่ใช่ผ่าน doc แต่ผ่านซอร์สโค้ดของหน้า ...

Getbootstrap.com ชิดขวาของพวกเขาไปทางขวาด้วยความช่วยเหลือของการเรียนต่อไปนี้:navbar-navml-md-auto

— ClemC
แหล่งที่มา

1

ทำงานได้อย่างสวยงามสำหรับฉัน ไม่มีอะไรทำ

— Maria Campbell

14

ใช้ml-autoแทนmr-autoหลังจากใช้navjustify-content-end กับul

— เจมส์ไพค์
แหล่งที่มา

9

ใช้รหัสนี้เพื่อย้ายรายการไปทางขวา

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

— Maijied Hasan Shuvo
แหล่งที่มา

1

ที่จะไม่ทำงานเมื่อคุณมีเมนูที่ยุบอย่างไรก็ตามด้วย ml-auto มันจะยังคงทำงานได้เพราะเมื่อเมนูถูกยุบรายการ <li> จะยังคงใช้ความกว้าง 100% ดังนั้นจึงไม่มีการใช้ระยะขอบ

— Ryan S

8

หากคุณต้องการให้บ้านคุณสมบัติและราคาเหลืออยู่ทันทีหลังจากคุณnav-brandจากนั้นเข้าสู่ระบบและลงทะเบียนทางด้านขวาจากนั้นห่อทั้งสองรายการ<div>และใช้.justify-content-between:

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

— เจเคนเนดี
แหล่งที่มา

7

เพียงเพิ่ม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>

— SKL
แหล่งที่มา

5

ใช้คลาส flex-row-reverse

<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>

— mubsher
แหล่งที่มา

2

มันเป็นการเปลี่ยนแปลงเล็กน้อยใน boostrap 4 ในการจัดแนวแถบนำทางไปทางด้านขวาคุณต้องทำการเปลี่ยนแปลงเพียงสองครั้ง พวกเขาเป็น:

ในnavbar-navชั้นเรียนเพิ่มw-100เป็นnavbar-nav w-100เพื่อให้ความกว้างเป็น 100
ในnav-item dropdownชั้นเรียนเพิ่มml-autoเป็นnav-item dropdown ml-autoเพื่อให้ระยะขอบซ้ายเป็นอัตโนมัติ

หากคุณไม่เข้าใจโปรดอ้างอิงภาพที่ฉันแนบไปด้วย

ลิงค์ CodePen

รหัสที่มาแบบเต็ม

<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>

— อานันท์ราชา
แหล่งที่มา

2

สำหรับ bootstrap 4.3.1 ฉันใช้ nav-pills และไม่มีอะไรทำงานให้ฉันยกเว้นสิ่งนี้:

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

— Ajay Kumar
แหล่งที่มา

2

ใน bootstrap v4.3 เพียงเพิ่มml-autoใน<ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

— Mohit Prajapati
แหล่งที่มา

0

ฉันกำลังเรียกใช้ Angular 4 (v.4.0.0) และ ng-bootstrap (Bootstrap 4) รหัสนี้จะไม่เกี่ยวข้องทั้งหมด แต่หวังว่าผู้คนสามารถเลือกและเลือกสิ่งที่ใช้ได้ บางครั้งฉันก็ต้องหาวิธีแก้ปัญหาเพื่อให้รายการของฉันถูกต้องยุบอย่างถูกต้องและนำรูปโปรไฟล์ของ google (โดยใช้ OAuth) มาดรอปดาวน์

<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>

— GrettyGoose
แหล่งที่มา

0

สำหรับ Bootstrap 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>

— Kaczor
แหล่งที่มา

0

การใช้กล่องบูตแบบยืดหยุ่นช่วยให้เราสามารถควบคุมการจัดวางและจัดตำแหน่งองค์ประกอบการนำทางของคุณ สำหรับปัญหาข้างต้นการเพิ่ม mr-auto เป็นทางออกที่ดีกว่า

<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

— Maro
แหล่งที่มา

0

ตัวอย่างการทำงานของ BS 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>

— belgoros
แหล่งที่มา

0

หากทั้งหมดข้างต้นล้มเหลวฉันเพิ่มความกว้าง 100% ให้กับคลาส navbar ใน CSS จนกว่าจะถึงตอนนั้นนายอัตโนมัติไม่ทำงานให้ฉันในโครงการนี้ด้วย 4.1

— Dominic Davies
แหล่งที่มา

-1

ค้นหาบรรทัด 69 ใน verndor-prefixes.less และเขียนมันต่อไปนี้:

.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);
}

ขยายตัวอย่างข้อมูล

— พอล
แหล่งที่มา

-2

เพียงคัดลอกสิ่งนี้จากหนึ่งในหน้า getbootstrap สำหรับรุ่นที่วางจำหน่าย 4 ซึ่งทำงานได้ดีกว่าด้านบน

<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>

— Gary Molton
แหล่งที่มา

-3

ฉันยังใหม่ต่อการโอเวอร์โฟลว์และการพัฒนาแบบใหม่ถึงส่วนหน้า นี่คือสิ่งที่ได้ผลสำหรับฉัน ดังนั้นฉันไม่ต้องการให้แสดงรายการ

.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>

— MSangha
แหล่งที่มา