css - 如何调整右对齐导航栏的宽度

Question

jsfiddle 链接:https://jsfiddle.net/ckmmd5aL/

这是我的 Bootstrap HTML

<div class="img-full">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a href="#"><img class="img-responsive" src="images/oj_menu_heading.png" /></a>
                <!--a class="navbar-brand" href="#" style="color: white;">Parwest</a> 
                <a class="navbar-brand" href="#" style="color: white;">Group</a-->

                    </div>


                    <div id="navbar" class="navbar-collapse navbar-right collapse">
                      <ul class="nav navbar-nav">
                        <li><a href="#"><img class="img-responsive" src="images/oj_menu_organisation.png" style="width:80%; height:80%"/></a>   <!--a href="#" style="color: white;">Organisation Profile</a-->
                        </li>
                        <li><a href="#"><img  class="img-responsive" src="images/oj_menu_projects.png" style="width:80%; height:80%"/></a>
                        </li>
                        <li><a href="#"><img class="img-responsive" src="images/oj_menu_news.png" style="width:80%; height:80%"/></a>
                        </li>
                        <li><a href="#"><img class="img-responsive" src="images/oj_menu_contact.png" style="width:80%; height:80%"/></a>
                        </li>
                      </ul>
                    </div>
            <!--/.nav-collapse -->
                </div>
          <!--/.container-fluid -->
            </nav>
        </div>
    </div>

这是CSS

.img-full {
  height: 450px;
  background-image: url('images/oj_header.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;  
}

.navbar {
  margin-top: 20px;
  background: no-background;
}

.navbar.navbar-default {
  background-color: transparent;
  border-color: transparent;
}

这给了我这个结果

但我想减少右侧导航栏元素之间的差距，以便获得此布局

谁能告诉我如何缩小间隙并进一步右对齐导航栏元素以获得所需的布局？

如有任何帮助，我们将不胜感激。提前致谢。

Answer 1

我会按照预期使用 Bootstrap 的网格。

<div class="col-sm-4">
    Logo
</div>

<div class="col-sm-8">
    Navbar
</div>

Demo

此外，我还删除了嵌套容器并将顶部定位应用于背景图像。