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

Question

我在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;
      }
    }

Answer 1

我设法解决了这个问题。另一个CSS文件中的媒体查询缺少结束标记。我正在为所有CCS使用组合器，结果是md size的媒体查询在另一个文件的媒体查询中。

Answer 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>