html - Bootstrap 3 页脚出现严重问题， Logo 对齐导致出现水平滚动条

Question

上图是我的客户所期望的。我正在使用 Bootstrap 3 来构建它。目前我们没有“我们的团队”或“投资组合”页面。每当我试图让图片保持在页面的右侧时，该行最终对于页面来说有点太宽，并且会创建一个水平滚动条。

我已确保我正确地嵌套了行，所有行都正确地位于容器内。我已经尝试了几种页脚方法，我目前使用的是一种解决方法。这是页脚的代码:

#footer {
  height: 100px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: @brand-secondary;
}

这是辅助 Logo 的代码。我认为这是导致它发生冲突的原因:

#secondary-logo {
  @picture-size: 150px;
  @rotation: -20deg;
  width: @picture-size;
  height: @picture-size;
    -ms-transform: rotate(@rotation); /* IE 9 */
  -webkit-transform: rotate(@rotation); /* Safari 3-8 */
  transform: rotate( @rotation );
  position: relative;
  top: -70px;
  right: -10px;
}

我尝试了不同的组合，现在页脚是一场灾难。我正在使用 Bootstrap nav 类来格式化页脚链接的外观和感觉，但是当我不使用 nav 时，#secondary-logo id 将以所需方式偏移 Logo 。简而言之，我正在寻找一种特定的解决方案来正确设置此辅助 Logo 的格式，并且我愿意重新设计其余的页脚布局来完成此操作。这是 html:

<div class="container-fluid">
        <div class="row">
          <div id="footer">
          <div class="col-xs-12 text-center">
            <ul class="nav navbar-nav nav-bottom">
              <li><a id="home" href="#" onclick="return false">HOME</a></li>|
              <li><a id="services" href="#" onclick="return false">SERVICES</a></li>|
              <li><a id="contact" href="#" onclick="return false">CONTACT</a></li>
            </ul>
            <img id="secondary-logo" src="img/company_logoalt.png" class="img-responsive pull-right" alt="alternate logo">
            <span>© Company 2018</span>
          </div>
        </div>
      </div>
    </div>

Answer 1

我做了哪些改变:

1. 已删除 <ul>并将其替换为 <p> , 为了减少并发症
2. 赋予 display:inline 风格到上面提到的<p>让他们肩并肩
3. 通过将新行添加到 <span>© Company 2018</span> 来修复 Bootstrap Grid 问题.这将使您的公司 2018 年转移到新的生产线，这就是您所期待的
4. 固定和较小的 Logo 尺寸，并更改了 position:relative至 position:absolute

#footer {
  height: 100px;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: lightgray;
}

#secondary-logo {
  @picture-size: 20px;
  @rotation: -20deg;
  width: 50px;
  height: @picture-size;
  -ms-transform: rotate(@rotation);
  /* IE 9 */
  -webkit-transform: rotate(@rotation);
  /* Safari 3-8 */
  transform: rotate( @rotation );
  position: absolute;
  top: -50px;
  right: 30px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div id="footer">
      <div class="col-xs-12 text-center" style="margin-top:20px">
        <p style="display:inline; margin:0px 20px;"><a id="home" href="#" onclick="return false">HOME</a></p>|
        <p style="display:inline; margin:0px 20px"><a id="services" href="#" onclick="return false">SERVICES</a></p>|
        <p style="display:inline; margin:0px 20px;"><a id="contact" href="#" onclick="return false">CONTACT</a></p>
        <img id="secondary-logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQeiBguO0475m-ltZwzjc0QAvOOcdmJ_2qmJ7D5VN0KfB4Hh6No" class="img-responsive " alt="alternate logo">
      </div>
      <div class="col-xs-12 text-center">
        <span>© Company 2018</span>
      </div>
    </div>
  </div>
</div>
</div>