文章/答案/技术大牛

发布

社区首页 >问答首页 >严重的问题，引导带3页脚，徽标对齐导致水平滚动条出现

问严重的问题，引导带3页脚，徽标对齐导致水平滚动条出现
EN

Stack Overflow用户

提问于 2018-03-14 03:33:08

回答 2查看 461关注 0票数 1

上面的图片是我的客户所期望的。我正在用Bootstrap 3来建造它。目前，我们还没有“我们的团队”或“投资组合”页面。每当我试图让图片停留在页面的右侧时，行就会对页面有点太宽，它会创建一个水平滚动条。

我已经确定我正确地嵌套了行，它们都在容器中。我已经尝试过几种处理页脚的方法，目前我使用的是一些变通方法。下面是页脚的代码：

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

这是第二个标志的代码。我想这就是引起冲突的原因：

#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将以所需的方式抵消徽标。简单地说，我正在寻找一个特殊的解决方案来正确地格式化这个次要徽标，我愿意重新设计剩下的页脚布局来完成它。下面是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>

twitter-bootstrap

twitter-bootstrap-3

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-03-14 05:39:02

我做了什么改变：

移除<ul>，用<p>代替，以减少并发症
给上面提到的display:inline风格<p>，让它们并排
通过向<span>© Company 2018</span>添加新行，修正了引导网格问题。这将使你的公司2018年进入新的生产线，这正是你所期待的。
固定和小徽标大小，并将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>

票数 1

Stack Overflow用户

发布于 2018-03-14 04:47:58

我做了一个你想要的例子，我用了购物车的图像

#secondary-logo {
    top: -28px;
    right: 124px;
    position: absolute;
}

您需要添加位置:绝对；为您的标志形象。使用它时不会出现水平滚动条。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49269337

复制

相似问题

问严重的问题，引导带3页脚，徽标对齐导致水平滚动条出现
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问严重的问题，引导带3页脚，徽标对齐导致水平滚动条出现EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问严重的问题，引导带3页脚，徽标对齐导致水平滚动条出现
EN