Question

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

这是我的引导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

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

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

1 个答案: