Bootstrap 3 Navbars布局问题

Question

我正在为我正在进行的项目的Navbars布局苦苦挣扎。 我正在尝试使用左侧的图像/徽标来实现导航栏布局； 右侧的链接，但右侧链接上方的登录/注销按钮。 我几乎得到了我要实现的布局，但是布局下方的标题始终总是部分地位于导航栏的后面，我不确定如何在右侧链接上方设置登录按钮。

这就是我要在下面实现的目的（附图）。 http://1drv.ms/1EkpGbO

// CSS

.navbar-brand {
  float: left;
  padding: 0px 15px;
  font-size: 0px;
  line-height: 81px;
  height: 81px;
}

// html

<div class="navbar navbar-inverse navbar-fixed-top">
    <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 href="#" class="navbar-brand">
                <img src="/Content/Images/logo.png" title="logo" alt="logo" />
            </a> 
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
                <li>
        <span><img src="/Content/Images/login.png" title="login" alt="login" /></span>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content">
    <header>
<h1>Heading</h1>
</header>
    <hr />
<p>page content </p>
    <footer>
        <p>...</p>
    </footer>
</div>

有人可以给我一些关于CSS和HTML需要改变的建议吗？

非常感谢，塔兰

Answer 1

<div class="navbar  navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

        <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="row">

            <div class="col-sm-6 col-xs-12">
                <img class="img-responsive" src="http://placehold.it/300x100">
            </div>

            <div class="col-xs-12 col-sm-6">

                <div class="row">
                    <img class="pull-right img-responsive" src="http://placehold.it/150x70">
                </div>

                <div class="row">
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Link 1</a>
                            </li>
                            <li><a href="#">Link 2</a>
                            </li>
                            <li><a href="#">Link 3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container body-content">
    <header>
        <h1>Heading</h1>
    </header>
    <hr />
    <p>page content </p>
    <footer>
        <p>...</p>
    </footer>
</div>

工作小提琴http://jsfiddle.net/DTcHh/1726/

这只是默认的引导程序类，请调整您的响应视图