ในBootstrapวิธีที่เป็นมิตรกับแพลตฟอร์มที่สุดในการสร้างแถบการนำทางที่มีโลโก้ A อยู่ทางซ้ายรายการเมนูที่อยู่ตรงกลางและโลโก้ B ทางด้านขวา

นี่คือสิ่งที่ฉันได้ลองมาแล้วและมันก็อยู่ในแนวเดียวกันเพื่อให้โลโก้ A อยู่ทางซ้ายรายการเมนูถัดจากโลโก้ด้านซ้ายและโลโก้ B ทางด้านขวา

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

อัพเดต 2019

Bootstrap 4

ตอนนี้ Bootstrap 4 มี flexbox การจัดตำแหน่ง Navbar ง่ายกว่ามาก นี่คือตัวอย่างการปรับปรุงสำหรับซ้าย , ขวาและศูนย์ใน Bootstrap 4 Navbarและสถานการณ์การจัดตำแหน่งอื่น ๆ อีกมากมายแสดงให้เห็นที่นี่แสดงให้เห็นที่นี่

flexbox , อัตโนมัติอัตรากำไรขั้นต้นและการสั่งซื้ออาคารเรียนสามารถนำมาใช้ในการจัดเนื้อหา Navbar ตามความจำเป็น มีหลายสิ่งที่ต้องพิจารณารวมถึงการสั่งซื้อและการจัดตำแหน่งรายการ Navbar (แบรนด์ลิงก์ toggler) ทั้งบนหน้าจอขนาดใหญ่และมุมมองมือถือ / มุมมองแบบยุบ อย่าใช้การเรียนตาราง (แถวเทือกเขา) สำหรับ Navbar

นี่คือตัวอย่างต่าง ๆ ...

ลิงค์ซ้าย, กลาง (แบรนด์) และลิงค์ด้านขวา:

<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

อีกตัวเลือก Nav4 BS4 ที่มีลิงค์กลางและภาพโลโก้ซ้อนทับ :

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

หรือสถานการณ์การจัดตำแหน่ง Bootstrap 4 อื่น ๆ เหล่านี้:

ยี่ห้อด้านซ้าย, ลิงค์กลางตาย (ว่างเปล่า)

ยี่ห้อและลิงค์กลางไอคอนซ้ายและขวา

ตัวอย่าง Bootstrap 4 เพิ่มเติม :

toggler ซ้ายบนมือถือ, ยี่ห้อ
center center ที่ถูกต้องและลิงค์บน mobile
right จัดลิงค์ลิงก์บนเดสก์ท็อป, ลิงค์กลางบนลิงค์ซ้ายมือถือ
& toggler, ยี่ห้อ center, ค้นหาทางขวา

ดูเพิ่มเติมที่: Bootstrap 4 จัดแนวรายการ navbar ไปทางขวา
Bootstrap 4 navbar จัดชิดขวาด้วยปุ่มที่ไม่ยุบบนอุปกรณ์เคลื่อนที่
กึ่งกลางองค์ประกอบใน Bootstrap 4 Navbar

Bootstrap 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

ตัวอย่างเพิ่มเติม:

ยี่ห้อด้านซ้าย, ลิงค์กลาง
toggler ซ้าย, แบรนด์กลาง

สำหรับ 3.x ดูที่การปรับความถูกต้องด้วย nav: Bootstrap center navbar

Center Navbar ใน Bootstrap
Bootstrap 4 จัดแนวรายการ navbar ไปทางขวา

Bootstrap 4

เรามีหลายวิธีในการจัดตำแหน่งรายการ navBars

สำหรับจัดแนวซ้าย

class = "navbar-nav mr-auto "

สำหรับการจัดชิดขวา

class = "navbar-nav ml-auto "

สำหรับการจัดกึ่งกลาง

class = "navbar-nav mx-auto "

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

ฉันต้องการบางสิ่งที่คล้ายกัน (รายการซ้าย, กลางและขวา) แต่ด้วยความสามารถในการทำเครื่องหมายรายการกึ่งกลางว่าใช้งานได้ สิ่งที่ทำงานให้ฉันคือ:

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>

CSS:

@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;
  }
}

Bootstrap 4 (เหมือน alpha 6)

Navbars สร้างด้วย flexbox! แทนที่จะลอยตัวคุณจะต้องใช้ flexbox และ margin margin

สำหรับจัดแนวใช้ให้ถูกต้อง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

ตบหัวของฉันเพียงแค่อ่านคำตอบของฉันใหม่และรับรู้ว่า OP ได้ขอโลโก้สองอันทางซ้ายมือด้านขวาด้วยเมนูกลางไม่ใช่อีกวิธีหนึ่ง

สิ่งนี้สามารถทำได้อย่างเคร่งครัดใน HTML โดยใช้ "navbar-right" และ "navbar-left" สำหรับ Bootstrap สำหรับโลโก้จากนั้น "nav-justified" แทนที่จะเป็น "navbar-nav" สำหรับ UL ของคุณ ไม่จำเป็นต้องใช้ CSS เพิ่มเติม (เว้นเสียแต่ว่าคุณต้องการใส่สลับ navbar-ยุบในกึ่งกลางในวิวพอร์ต xs จากนั้นคุณจะต้องแทนที่บิต แต่จะทำให้มันขึ้นอยู่กับคุณ)

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

Bootply: http://www.bootply.com/W6uB8YfKxm

สำหรับผู้ที่มาที่นี่เพื่อพยายามจัด "ตราสินค้า" ที่นี่เป็นคำตอบเก่าของฉัน:

ฉันรู้ว่าหัวข้อนี้เก่าไปหน่อย แต่เพียงโพสต์สิ่งที่ฉันค้นพบเมื่อทำสิ่งนี้ ฉันตัดสินใจที่จะแก้ปัญหาของฉันในคำตอบของ skelly เนื่องจากการแบ่งของ tomaszbak บน collaspe ครั้งแรกที่ฉันสร้าง "navbar-center" ของฉันและปิดการลอยสำหรับ navbar ปกติใน CSS ของฉัน:

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

.navbar-brand{
   float:none;
}

อย่างไรก็ตามปัญหาเกี่ยวกับคำตอบของ skelly คือถ้าคุณมีชื่อแบรนด์ที่ยาวมาก (หรือคุณต้องการใช้ภาพสำหรับแบรนด์ของคุณ) จากนั้นเมื่อคุณไปที่ sm viewport อาจมีการทับซ้อนเนื่องจากตำแหน่งที่แน่นอนและเนื่องจากผู้แสดงความคิดเห็นมี กล่าวว่าเมื่อคุณไปที่วิวพอร์ต xs สวิตช์สลับจะหยุดพัก (ยกเว้นว่าคุณใช้การจัดตำแหน่ง Z แต่ฉันไม่ต้องการกังวลเกี่ยวกับมัน)

ดังนั้นสิ่งที่ฉันทำคือการใช้ยูทิลิตีการตอบสนอง bootstrap เพื่อสร้างบล็อคแบรนด์หลายรุ่น:

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

ดังนั้นตอนนี้ lg และ md viewports มีแบรนด์อยู่ตรงกลางพร้อมลิงก์ไปทางซ้ายและขวาเมื่อคุณไปที่ sm viewport ลิงก์ของคุณจะเลื่อนไปที่บรรทัดถัดไปเพื่อที่คุณจะไม่ทับกับแบรนด์ของคุณและสุดท้ายที่ xs ดู collaspe kicks ในและคุณสามารถใช้สลับ คุณสามารถทำขั้นตอนนี้เพิ่มเติมและปรับเปลี่ยนการสืบค้นสื่อสำหรับ navbar-right และ navbar-left เมื่อใช้กับ navbar-brand เพื่อที่ใน sm viewport การเชื่อมโยงทั้งหมดอยู่กึ่งกลาง แต่ไม่มีเวลาจัดการ

คุณสามารถตรวจสอบ bootply เก่าของฉันที่นี่: www.bootply.com/n3PXXropP3

ฉันเดาว่าการมี 3 แบรนด์อาจจะเป็นเรื่องยุ่งยากเหมือนกับ "z" แต่ฉันรู้สึกเหมือนในโลกแห่งการออกแบบที่ตอบสนองได้โซลูชั่นนี้เหมาะกับสไตล์ของฉันดีกว่า

ฉันพบว่าสิ่งต่อไปนี้เป็นวิธีแก้ปัญหาที่ดีกว่าทั้งนี้ขึ้นอยู่กับเนื้อหาของรายการซ้ายกลางและขวาของคุณ ความกว้าง 100% โดยไม่มีระยะขอบทำให้การหารของ divs ซ้ำซ้อนและป้องกันแท็ก anchor ทำงานอย่างถูกต้อง - นั่นคือโดยไม่ต้องใช้ดัชนี z ที่ยุ่งเหยิง

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

นี่เป็นคำถามที่ล้าสมัย แต่ฉันพบวิธีอื่นในการแบ่งปันได้จากหน้า bootstrap github เอกสารไม่ได้รับการปรับปรุงและมีคำถามอื่น ๆ เกี่ยวกับ SO เพื่อขอคำตอบเดียวกันแม้ว่าจะมีคำถามที่แตกต่างกันเล็กน้อย โซลูชันนี้ไม่เฉพาะเจาะจงกับเคสของคุณ แต่อย่างที่คุณเห็นว่าโซลูชันเป็นสิ่งที่<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

และถูกระบุว่าเป็นจะไม่แก้ไขใน V3

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

ใส่เขตข้อมูลที่คุณต้องการจัดกึ่งกลางทางขวาหรือซ้ายตามส่วนด้านบน

คุณตั้งระยะขอบซ้ายเป็นอัตโนมัติ -> 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="#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>

ทางออกที่ง่ายที่สุด:

เพียงแค่แบ่งออก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>