Bootstrap导航栏下拉菜单定位

Question

I am designing a website.In my site I want to create such a menu where navbar will contain such a ul which class will be nav navbar-nav navbar-right .After shrinking the page size,when the dropdown button will appear.Then if the user click the button,in the appeared dropdown menu the li item should be float left,that means ul class will be nav navbar-nav navbar-left .How can I do this?I tried jquery.But in that case,the ul is not returning to its original nav navbar-nav navbar-right class after the page is returning to its original size.Here is an example of a website-

http://preview.themeforest.net/item/riana-charity-html-template/full_screen_preview/12694958

<header class="header">

      <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


      <ul class="nav navbar-nav navbar-right"> <!--This ul class should be changed,when the dropdown button is clicked. -->
        <li><a href="#">Link</a></li>

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

      </header>

Using the Jquery

$('.navbar-toggle').click(function(){
$('#dropdown').removeClass('nav navbar-nav navbar-right');      
$('#dropdown').addClass('nav navbar-nav navbar-left');  
});

Answer 1

You have to add navbar-right class and remove navbar-left class on window resize

$(window).resize(function(){
    if($(window).width () > 767) { // media query break point
       $('#dropdown').removeClass('navbar-left');      
       $('#dropdown').addClass('navbar-right');  
    } 
});

You can also achieve this only with CSS