Question

编辑＃4：我的所有HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="index,follow">
        <title>{{var pageTitle}}</title>
        <link rel="icon" type="image/png" href="{{var protoHost}}FavIconstackoverflow32.png">
        <link rel="icon" type="image/x-icon" href="{{var protoHost}}favicon.ico">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <link rel="stylesheet" href="{{var protoHost}}css/main.css">
        <link rel="stylesheet" href="{{var protoHost}}css/print.css">
        <link rel="stylesheet" href="{{var protoHost}}css/navbar-custom.css">
        {{var extraHeaders}}
    </head>
    <body>
        <div class="page">
          <div class="container-fluid">
            <div class="topheader col-xs-0 col-md-0">
                  <div class="phonecolours">
                    <p class="headerspacer inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-865-7733" class="phonecolours"> (613) 865-7733</a></p>
                    <p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-817-7733" class="phonecolours"> (613) 817-7733</a></p>
                    <p class="headercontact inlineParagraph"><i class="fa fa-phone"></i><a href="tel:613-454-7733" class="phonecolours"> (613) 454-7733</a></p>
                  </div>
                  <button type="button" class="btn btnstackoverflow buttonspacer">Referral Services</button>
                  <button type="button" class="btn btnstackoverflow buttonlinkspacer">My Account</button>
                  <button type="button" class="btn btnstackoverflow buttonlinkspacer">Reseller Services</button>
            </div>
              <div class="col-xs-3 col-sm-3 branding">
                  <a class="imgCon" href="{{var protoHost}}">
                      <img class="img-responsive" alt="stackoverflowinternet Internet Services" src="{{var protoHost}}img/TrueInternet.png">
                  </a>
              </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer brandingspacer buttonheader" href="https://www.facebook.com/stackoverflowInternetService"><i class="fa fa-facebook-square fa-2x" style="color:#3B5998"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://twitter.com/stackoverflowinternetcanada"><i class="fa fa-twitter fa-2x" style="color:#1da1f2"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://www.instagram.com/stackoverflowinternetinternet/"><i class="fa fa-instagram fa-2x" style="color:#623628"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://www.youtube.com/channel/UC_EH7RNVnL7IUch12iHzFAQ"><i class="fa fa-youtube-play fa-2x" style="color:#E62B24"></i></a>
                  </div>
                  <div class="col-xs-0">
                      <a class="inlineParagraph socialspacer buttonheader" href="https://plus.google.com/116264661972220598755"><i class="fa fa-google-plus-square fa-2x" style="color:#DB4437"></i></a>
                  </div>
                </div>
            <nav class="navbar navbar-custom">
                    <div class="col-xs-0 container-fluid" data-expand="false">
                      <div class="row">
                      <p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
                      <p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
                      <p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
                    </div>
                  </div>
            </nav>
            <div class="col-xs-0">
                {{var content}}
            </div>
            <div class="footerspacer"></div>
                <div class="container-fluid">
                    <div class="row">
                      <footer class="footer">
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
                      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
                     <br><br><br>
                    <p>&copy; 2016 stackoverflow Internet Services - All Rights Reserved</p>
                    </footer>
                  </div>
                </div>

        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="{{var protoHost}}js/showhide.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <script src="{{var protoHost}}js/navCode.js"></script>
        {{var extraScripts}}
    </body>
</html>

编辑＃3：我的原始问题已经解决，但现在可能还没有响应。请参阅我的旧问题以查看问题：Bootstrap Columns not Being Responsive

我的页脚不是我页面的整个宽度。我将页面设置为100px，其他所有内容都完美无缺。我试图将我的宽度设置为自动（太短），太过100％（太长），并继承（它适合它，但我失去了所有响应）。

我的CSS：

.page{
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}
.footer{
  background-color: #277FD8;
  bottom: 0;
  width: 100%;
  height: auto;
}

我的HTML：

<div class="container-fluid">
    <div class="row">
      <footer class="footer">
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
      <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
     <br><br><br>
    </footer>
  </div>
</div>

页面CSS规则是一个包装器。

图片：

编辑：感谢所有回复！我试过在我的容器流体和行中嵌套Footer标签，但它没有工作。这就是我的意思，当我在页脚上使用100％宽度时（抱歉，它不高，我不知道我在想什么/打字）：

编辑＃2：

Navbar HTML：

<nav class="navbar navbar-custom">
  <div class="col-xs-0 container-fluid" data-expand="false">
    <div class="row">
      <p class="inlineParagraph navbartext"><a href="/internet" color="white"><i class="fa fa-cloud-download navIcon fa-lg"></i>View Our Internet Packages!</a></p>
      <p class="inlineParagraph navbarspacer"><a href="/phone"><i class="fa fa-phone navIcon fa-lg"></i>Phone Services!</a></p>
      <p class="inlineParagraph navbarspacer"><a href="/Televison"><i class="fa fa-television navIcon fa-lg"></i>Television Programs!</a></p>
    </div>
  </div>
</nav>

Navbar CSS：

.navbar{
    height: 100px;
}
.navbar-custom {
  background-color: #277FD8;
  border-color: #277FD8;
  z-index: 9999px;
  height: 70px;
}

Answer 1

问题是页脚被包裹在具有固定宽度的div中。

.page {
   width: 1100px; <-- THIS IS THE PROBLEM.  REMOVE THIS.
   margin: 0 auto;
   height: 100%;
   position: relative;
}

如果你删除它，页脚会扩展窗口的整个宽度，但是我不知道删除会如何影响页面的其余部分。最好的办法是删除它，然后使用bootstrap的container类作为页面包装器。 Container-fluid将超过100％宽度，但container可能是您正在寻找的，因为它将使用适合每个媒体大小断点的宽度（无需担心定义它们）。如果您将页面内容放在具有固定宽度的包装器中，就像现在一样，您的页面将不会响应，因为您要阻止该包装器中的元素按比例缩小至小于1100px。只需快速查看整页标记，如果您删除了.page元素并将container-fluid更改为container，就可以了。请记住，如果这些部分的背景颜色要超过100％，则一旦包装在容器中，它们将不再是100％。所以你必须做这样的事情：

#background-color {
    background: #ccc;
}

<div id="background-color">
    <div class="container">
        *content here *
    </div>
</div>

此外，如果您希望页脚占据页面的100％，但页脚内的内容仅填充容器（或包装）宽度，您需要将其设置为类似于：

<footer>
   <div class="container">
      <div class="row">
          <a href="XYZ"></a>
          etc..
       </div>
   </div>
</footer>

Answer 2

尝试设置如下：

<div class="container-fluid">
  <div class="row">
    <footer>
    ...
    </footer>
  </div>
</div>

这样你的页脚不应该干扰宽度。（您也可以尝试以下方法）

body,html{
  width: 100%;
  height: 100%;
}

编辑：您的新问题

.page{
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    position: relative;
}

此处的宽度使得页脚上的100％被视为1100px 在页面元素上放置固定宽度也会破坏引导程序的整个目的。删除它，让我知道是否仍然出错。

Answer 3

你的页脚将继承它周围的任何内容，你需要将整个页脚html从其容器中取出并在最后添加它只是为了body标签。从那里确保它有100％的宽度。

footer {width:100%;}

    <footer>
    ...
    </footer>
</body>

Answer 4

你应该重新命名你的页脚，根据bootlint，只允许将行放在.container和.col中，.col只能放在.row中。请参阅下面的页脚代码

<footer>
    <div class="container">
        <div class="row">
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
            <p class="col-xs-12">&copy; 2016 stackoverflow Internet Services - All Rights Reserved</p>
        </div>
    </div>
</footer>

Answer 5

你试过了吗？

trashfuntion

Answer 6

虽然您已为width: 100%;提及class footer，但您将页脚放在class page内，其宽度为1100px。这就是为什么你的Footer的100％是1100px。因此，您尝试将页脚放在课程页面之外。这会对你有所帮助。感谢。

Answer 7

.container-fluid 类提供全宽容器，跨越视口的整个宽度

容器不可嵌套（您不能将容器放在另一个容器中）。

带有边距和填充调整的

页脚类

<footer class="footer">
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
  <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
</footer>

Answer 8

根据我的理解，您只希望页脚栏为全宽，但内容为页面宽度。以下是我提出的建议：

https://run.plnkr.co/najlsKreCkKZCESQ/

https://plnkr.co/edit/lS7NiTBfMSe8l4KBLxvH?p=preview

基本上，我将页脚从页面包装器中移出，并对其进行了一些小的修改，这有效：

<div class="footerspacer"></div>
<div class="row">
    <footer class="footer">
        <div class="page">
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}PrivacyPolicy">Privacy Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfService">Terms Of Service</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}AcceptableUsePolicy">Acceptable Use Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}WarrentyAndReturnsPolicy">Warranty &amp; Returns Policy</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}ThridPartyCopyrightNotices">Third Party Copyright Notices</a>
            <a class="col-xs-12 col-md-2" href="{{var protoHost}}TermsOfServicePhone">Terms Of Service For Phone</a>
            <br>
            <br>
            <br>
            <p>&copy; 2016 stackoverflow Internet Services - All Rights Reserved</p>
        </div>
    </footer>
</div>

通过将页脚移出页面包装器，它需要全宽，然后内部的内容必须用页面类包装在div中。如果这不是您想要的100％，请告诉我。我知道，它不漂亮，但它有效。：）

页脚不是页面的全宽

8 个答案: