私はこのコードを持っている左の隅にあるドロップダウンを引き、それCSS

Question

とモバイルの全幅ます

CSS

.flyout { 
    position: absolute; 
    top: 30px; 
    right: 15px; 
    background-color: #FFF; 
    padding: 20px; 
    border: 1px solid #eaeaea; 
    z-index: 999; 
    width: 400px; 
    border-top: 3px solid #337AB7; 
    display: none; 
    transition-timing-function: ease-in-out 1s; 
    /* Firefox v3.5+ */ 
    -moz-box-shadow:0px 4px 10px rgba(0,0,0,0.1); 
    /* Safari v3.0+ and by Chrome v0.2+ */ 
    -webkit-box-shadow:0px 4px 10px rgba(0,0,0,0.1); 
    /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */ 
    box-shadow:0px 4px 10px rgba(0,0,0,0.1); 
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=4,Color=#1a000000,Positive=true)"; 
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=4,Color=#1a000000,Positive=true); 
} 
@media (max-width: 768px) { 
    .fav { 
     position: relative; 
    } 
    .flyout { 
     left:0; 
    } 
} 

.flyout:before { 
    border-bottom: 10px solid #337AB7; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    content: ""; 
    display: inline-block; 
    right: 15px; 
    position: absolute; 
    top: -10px; 
    transition: border ease-in-out .18s; 
} 

HTML

<li class="fav"> 
    <a href="#" class="tools" target="_self" title="Favoriten"> 
     <span class="glyphicon glyphicon-star"></span> 
     <span class="hidden-sm hidden-md hidden-xs"> Meine Favoriten (3)</span> 
    </a> 
    <div class="flyout"> 
     <h4> 
      Meine Favoriten 
      <span class="glyphicon glyphicon-remove pull-right" 
        aria-hidden="true" title="Schliessen"></span> 
     </h4> 

     <div class="flyout-item"> 
      <a href="#"><b>Abteilungsleiter Lüftung</b> (80%-100%)</a> 
      <span class="glyphicon glyphicon-trash pull-right" 
        aria-hidden="true" title="Entfernen"></span> 
      <br> 
      <span class="glyphicon glyphicon-map-marker" 
        aria-hidden="true"></span> 
      XY 
     </div> 
    </div> 
</li> 

私の目標は最高ということですブレークポイント768は、フライアウトがビューポートの全幅でなければならない。したがって、モバイルは全幅にする必要があります。

コードペンhttp://codepen.io/anon/pen/NdPQaQ これはブートストラップのドロップダウンとともに動作します。

私は理由を説明してください。理由は左にあります：この場合、0は機能していませんか？

Answer 1

はそれがあったこと、はい、特定の解像度に

@media (max-width: 767px) 
{ 
    li.fav 
    { 
     position: static; 
    } 
}