จัดตำแหน่งองค์ประกอบใน Navbar ด้วย Bootstrap

เพื่อจัดตำแหน่งองค์ประกอบ เช่น nav links, forms, buttons, หรือ text ให้อยู่ซ้ายหรือขวาใน navbar ให้ใช้ utility classes .navbar-left หรือ .navbar-right ทั้งสองคลาสจะเพิ่ม CSS float ตามทิศทางที่ระบุ

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อจัดตำแหน่งองค์ประกอบ:

<!DOCTYPE html> <html> 
  <head> 
    <title>Bootstrap Example</title> 
    <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> 
    <script src = "/scripts/jquery.min.js"></script> 
    <script src = "/bootstrap/js/bootstrap.min.js"></script> 
  </head> 
  <body> 
    <nav class = "navbar navbar-default" role = "navigation" style="background: orange;"> 
      <div class = "navbar-header"> 
        <a class = "navbar-brand" href = "#">Alignment</a> 
      </div> 
      <div> 
        <!--Left Align--> 
        <ul class = "nav navbar-nav navbar-left"> 
          <li class = "dropdown"> 
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> 
              Java 
              <b class = "caret"></b> 
            </a> 
            <ul class = "dropdown-menu"> 
              <li><a href = "#">jmeter</a></li> 
              <li><a href = "#">EJB</a></li> 
              <li><a href = "#">Jasper Report</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">Separated link</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">One more separated link</a></li> 
            </ul> 
          </li> 
        </ul> 
        <form class = "navbar-form navbar-left" role = "search"> 
          <button type = "submit" class = "btn btn-default">Left align-Submit Button</button> 
        </form> 
        <p class = "navbar-text navbar-left">Left align-Text</p> 
        <!--Right Align--> 
        <ul class = "nav navbar-nav navbar-right"> 
          <li class = "dropdown"> 
            <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> 
              Java 
              <b class = "caret"></b> 
            </a> 
            <ul class = "dropdown-menu"> 
              <li><a href = "#">jmeter</a></li> 
              <li><a href = "#">EJB</a></li> 
              <li><a href = "#">Jasper Report</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">Separated link</a></li> 
              <li class = "divider"></li> 
              <li><a href = "#">One more separated link</a></li> 
            </ul> 
          </li> 
        </ul> 
        <form class = "navbar-form navbar-right" role = "search"> 
          <button type = "submit" class = "btn btn-default"> 
            Right align-Submit Button 
          </button> 
        </form> 
        <p class = "navbar-text navbar-right">Right align-Text</p> 
      </div> 
    </nav> 
  </body> 
</html>