大きな画面サイズでフッタが期待通りに表示されない

Question

私は、Twitterのブートストラップでフッターの望ましくない動作に苦しんでいます。小さな画面サイズ（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> 

@-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サイズのメディアクエリは他のファイルのメディアクエリにありました。

Answer 2

CSSは、MT-0 MT-SM-0およびフレックス列を削除する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>