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需求的变化给我一些建议吗？

非常感谢， Tarran

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/

这只是默认的bootstrap类，调整你的响应式视图

Bootstrap 3 Navbars布局问题

1 个答案: