Question

我正在使用标准的bootstrap 3导航栏，我试图将菜单选项的文本与文本和页脚中的图片放在同一水平面上。

基本上在左侧我想要菜单项的第一个字母＆＃34; Home＆＃34;与页脚的第一个字母垂直对齐，这是项目＆＃34; Impressum＆＃34;。

在右侧，我希望页脚的图像与菜单的最后一项对齐，即联系。

任何帮助都将受到高度赞赏。

这是我的代码：

<nav id="navbar-primary" class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navbar-primary-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
</div>
<div class="collapse navbar-collapse" id="navbar-primary-collapse">
  <ul class="nav navbar-nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="collection.html">COLLECTION</a></li>
    <li><a href="web-shop.html">ONLINE SHOP</a></li>
    <li><a href="philosophie.html">ABOUT US</a></li>
    <li><a href="contact.html">CONTACT</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
 <hr>
</div><!-- /.container-fluid -->
 </nav>

  <!-- Footer -->
 <div id="footer">
        <div class="row">
          <hr>  
            <div class="col-lg-6 col-lg-offset-1 col-xs-6">
                  <a href="impressum.html">  IMPRESSUM </a> | 
                  <a href="info.html">  INFO </a> |                    
                  <a href="pdf/presse.pdf">  PRESSE </a> </p>
            </div>
                  <div class="col-lg-1 col-xs-2">
                  <a href="http://pinterest.com"> <img src="img/pinterest.png" alt="" class="img-responsive"></a>  </div>
                  <div class="col-lg-1 col-xs-2">
                  <a href="http://instagram.com"> <img src="img/instagram.png" alt="" class="img-responsive"></a>  </div>
                  <div class="col-lg-1 col-xs-2">
                  <a href="http://facebook.com"> <img src="img/facebook.png" alt="" class="img-responsive"></a>  </div>

        </div>
        <!-- /.row -->
  </div>

这是我的CSS：

#navbar-primary.navbar-default {
background: transparent;
border: none;
}
#navbar-primary.navbar-default .navbar-nav {
width: 100%;
text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
display: inline-block;
float: none;
}
#navbar-primary.navbar-default .navbar-nav > li > a {
color: rgba(77, 77, 77, 1);
background-color: rgba(248, 248, 248, 0);
padding-left: 50px;
padding-right: 50px;
padding-top: 5px;
padding-bottom: 5px;
} 

#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
color: rgba(151, 211, 210, 1);
background-color: rgba(255, 255, 255, 1);

https://jsfiddle.net/DTcHh/9901/

Answer 1

I think you should set your css according to your layout, So far i made some alteration in your css check this code

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

#navbar-primary.navbar-default {
  background: transparent;
  border: none;
}
#navbar-primary.navbar-default .navbar-nav {
  width:100%;
  text-align: center;
}
#navbar-primary.navbar-default .navbar-nav > li {
  display: block;
  float: left;

}
#navbar-primary.navbar-default .navbar-nav > li > a {
    color: rgba(77, 77, 77, 1);
    background-color: rgba(248, 248, 248, 0);
  padding-left: 50px;
  padding-right: 48px;
  width:15px;
}

#navbar-primary.navbar-default .navbar-nav>li>a:hover,
#navbar-primary.navbar-default .navbar-nav>li>a:focus {
    color: rgba(151, 211, 210, 1);
    background-color: rgba(255, 255, 255, 1);
}
#navbar-primary.navbar-default .navbar-nav>.active>a,
#navbar-primary.navbar-default .navbar-nav>.active>a:hover,
#navbar-primary.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(151, 211, 210, 1);
    background-color: rgba(255, 255, 255, 1);

Bootstrap导航栏和页脚对齐

1 个答案: