在较大的屏幕尺寸上未按预期显示页脚答案

【问题标题】：Footer not displaying as expected on larger screen sizes在较大的屏幕尺寸上未按预期显示页脚
【发布时间】：2017-03-19 20:00:40
【问题描述】：

我正在努力解决 twitter bootstrap 中页脚的一些不良行为。在小屏幕尺寸 (xs + sm) 上，页脚会根据需要显示，但在较大的屏幕尺寸上，页脚的所有样式都会消失。我已经看了很长时间了，但不知道是什么原因造成的。我正在使用 Bootstrap 4.0.0a6。几乎没有任何样式，到目前为止，我们几乎都在使用 Bootstrap 的默认样式。我创建了一个JSFiddle 来演示错误的行为。它特别与小提琴中第 126-133 行之间设置的尺寸和背景颜色有关。

HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="/">MyBoilie</a>
    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="/introductie">Introductie</a>
          <div class="sub-menu hidden-md-up">
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/studiecentrum/praktijk">Studiecentrum</a>
          <div class="sub-menu hidden-md-up">
            <ul class="nav justify-content-center">
              <li class="nav-item w-50">
                <a href="/studiecentrum/praktijk" class="nav-link">Praktijk</a>
                <div class="dropdown-divider"></div>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/bodem">Bodem</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/bestand">Bestand</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/seizoenen">Seizoenen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/watertype">Watertype</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/waterkwaliteit">Waterkwaliteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/verblijfsduur">Verblijfsduur</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/doelstelling">Doelstelling</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/budget">Budget</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/weersinvloeden">Weersinvloeden</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/praktijk/boilie-care">Boilie-care</a>
                  </li>
                </ul>
              </li>
              <li class="nav-item w-50">
                <a href="/studiecentrum/theorie" class="nav-link">Theorie</a>
                <div class="dropdown-divider"></div>
                <ul class="nav flex-column">
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/grondstoffen">Grondstoffen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/bouwstoffen">Bouwstoffen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/eigenschappen">Eigenschappen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/zintuigen">Zintuigen</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/kwaliteit">Kwaliteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/attractiviteit">Attractiviteit</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/spijsvertering">Spijsvertering</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/kunstaas">Kunstaas</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="/studiecentrum/theorie/zigs">Zig&#039;s</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/werkplaats/basismix">Werkplaats</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a class="nav-link" href="http://myboilie.dev/profiel">Profiel</a></li>
        <li class="nav-item"><a href="#" class="nav-link" data-request="onLogout" data-request-data="redirect: '/aanmelden'">Uitloggen</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="row mt-4 mb-4">
  <div class="col-xs-12">
  </div>
</div>
<section id="header" class="ma-0 pa-0 mb-3">
  <div class="header text-center">
    <h1>Welkom bij MyBoilie</h1>
  </div>
</section>
<section id="page">
  <div class="container">
    <div class="row">
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-lightbulb-o blue"></i> Introductie</strong></div>
          <div class="card-block">
            <p>Bekijk onze trailer (2 minuten) en lees meer over de werking en mogelijkheden van onze site.</p> <a href="/introductie" class="btn btn-outline-primary">Introductie</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-book green"></i> Studiecentrum</strong></div>
          <div class="card-block">
            <p>Volg onze zoektocht naar informatie op basis van relevante thema's uit de praktijk en theorie.</p> <a href="/studiecentrum/praktijk" class="btn btn-outline-primary">Studiecentrum</a>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-3">
        <div class="card">
          <div class="card-header"><strong><i class="fa fa-flask red"></i> Werkplaats</strong></div>
          <div class="card-block">
            <p>Ga aan de slag in onze werkplaats en ontwerp, bestel en archiveer stapsgewijs je eigen boilierecepten.</p> <a href="/werkplaats/basismix" class="btn btn-outline-primary">Werkplaats</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<footer class="footer">
  <div class="container">
    <div class="row mt-0 mt-sm-0">
      <div class="col-sm-12 col-md-3">
        <ul class="nav flex-column">
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/algemene-voorwaarden">Algemene Voorwaarden</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/myboilie">Wat is MyBoilie</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/myboilie/tips">Handige tips</a>
          </li>
          <li role="presentation" class="nav-item   ">
            <a class="nav-link" href="http://myboilie.dev/introductie/waarom-zelf-ontwerpen">Waarom zelf ontwerpen</a>
          </li>
          <li role="presentation" class="nav-ite""><a class="nav-link" href="http://facebook.com/myboilie" target="_blank">Facebook</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-9">
        <div id="feedback-form" class="container">
          <form method="POST" action="http://myboilie.dev" accept-charset="UTF-8" data-request="onSendFeedback" data-request-update="&quot;contact\/feedback-sent.htm&quot;:&quot;#feedback-form&quot;">
            <div class="row mt-5 mt-sm-0">
              <div class="col-xs-12 col-sm-4">
                <div class="form-group">
                  <label for="name">Uw naam *</label>
                  <input type="text" class="form-control" value="" name="name" placeholder="Uw naam" tabindex="1" data-validation="length" data-validation-length="min2" data-validation-error-msg="Je naam is verplicht">
                </div>
                <div class="form-group">
                  <label for="body">Uw e-mail *</label>
                  <input type="text" class="form-control" value="" name="email" placeholder="Uw e-mail" tabindex="2" data-validation="email" data-validation-error-msg="Dit is geen geldig e-mailadres">
                </div>
              </div>
              <div class="col-xs-12 col-sm-8">
                <div class="form-group">
                  <label for="body">Uw bericht *</label>
                  <textarea class="form-control" value="" name="body" placeholder="Uw bericht" cols="30" rows="5" tabindex="3" data-validation="length" data-validation-length="min4" data-validation-error-msg="Voer een bericht in"></textarea>
                </div>
                <button type="submit" class="btn btn-primary" tabindex="4">Feedback</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</footer>

CSS

    @-ms-viewport {
    width: device-width;
  }

  .sub-menu {
    padding: 0 15px;
    background-color: #343638;
  }

  video {
    border: 1px solid #ccc;
  }

  .br-theme-fontawesome-stars-o .br-widget a:after {
    color: #d9edf7;
  }

  .br-theme-fontawesome-stars-o .br-widget a.br-selected:after {
    color: #bcdff1;
  }

  .br-theme-fontawesome-stars-o .br-widget a.br-active:after {
    color: #31708f;
  }

  #order-ingredients {
    padding: 0;
  }

  #order-ingredients li {
    list-style-type: none;
    list-style-position: outside;
  }

  #order-boilie,
  #order-address-payment,
  #order-addons {
    overflow: scroll;
  }

  #order-addons .tab-pane img,
  #order-address-payment .card img {
    width: 100%;
  }

  #configurator {
    z-index: 1040;
  }

  #order-recipe-details-open {
    margin-top: -7px;
  }

  #login-error {
    display: none;
  }

  .active a {
    color: #000;
  }

  .header {
    height: 400px;
    background: url('/storage/app/media/boilies-home.png') center center no-repeat;
    background-size: cover;
  }

  .header h1 {
    padding-top: 150px;
    font-size: 4em;
    color: #fff;
    text-shadow: #222 2px 2px 10px;
    opacity: 0.8;
  }

  .header h2 {
    font-size: 2em;
    color: #fff;
    text-shadow: #222 2px 2px 10px;
    opacity: 0.8;
  }

  .slider {
    /*width: 100% !important;*/
  }

  .modal {
    z-index: 1100;
  }

  .is_stuck {
    margin-top: 45px;
  }

  #posts-list.is_stuck {
    padding-top: 45px;
  }

  .blue {
    color: #28429c;
  }

  .green {
    color: #009900;
  }

  .red {
    color: #700600;
  }

  @media (max-width: 767px) {
    .navbar .container {
      margin-left: 0;
      margin-right: 0;
    }

    html {
      position: relative;
      min-height: 100%;
    }
    body {
      /* Margin bottom by footer height */
      margin-bottom: 750px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      padding: 50px 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 750px;
      background-color: #f5f5f5;
    }
    /*Small devices (landscape phones, 576px and up)*/
    @media (min-width: 576px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }
    /*Medium devices (tablets, 768px and up)*/
    @media (min-width: 768px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
        background-color: #f5f5f5;
      }
    }
    /*Large devices (desktops, 992px and up)*/
    @media (min-width: 992px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }
    /*Extra large devices (large desktops, 1200px and up)*/
    @media (min-width: 1200px) {
      body {
        margin-bottom: 500px;
      }
      .footer {
        height: 500px;
      }
    }

【问题讨论】：

你提到你有一个 JSFiddle，但我想你忘了链接它。你能附上它，我会审查？
谢谢，抱歉我忘记链接了。 Here it is
我无法在 JSFiddle 中复制您的问题。无论窗口大小如何，所有样式仍然存在。
输出屏幕小，页脚有灰色背景和大填充。放大输出屏幕，这些屏幕就会消失。
在您链接的小提琴中，我的任何页脚组件都没有灰色背景。

标签： html css twitter-bootstrap

【解决方案1】：

我已经设法解决了这个问题。另一个 CSS 文件中的媒体查询缺少结束标记。我对所有 CCS 都使用了组合器，结果 md 大小的媒体查询位于另一个文件的媒体查询中。

【讨论】：

【解决方案2】：

删除 mt-0 mt-sm-0 和 flex 列在使用 css mediascreen 样式设置时存在适应更大屏幕尺寸的问题尝试将页脚调整到任何尺寸的屏幕并将它们正确定位并正确显示这应该适应任何尺寸的屏幕

 <div class="tabbable full-width-tabs">
 <ul class="nav nav-tabs">
 <li class="take-all-space-you-can "></li>
 <li class="take-all-space-you-can "></li>
 <li class="take-all-space-you-can "></li>
 </ul>
  </div>


   <style>.full-width-tabs > ul.nav.nav-tabs { 
   display: table; 
   width: 100%;  
   table-layout: fixed; 
     } 
   .full-width-tabs > ul.nav.nav-tabs > li { 
   float: none; display: table-cell;
    } 
   .full-width-tabs > ul.nav.nav-tabs > li > a {
    text-align: center;
    } 
   .take-all-space-you-can{
    width:100%; background-color:#fff!important;
    }
    </style>

【讨论】：