ブートストラップ・フラッシュ・アラートCSSがモバイル・スクリーンで正しく機能しない

Question

現在、Railsアプリケーションを構築中です。私のアプリでは、警告時にBootstrapのCSSを使ってフラッシュメッセージを表示します。私は完全にブートストラップのCSSを使用していませんが、CSSの重複のために私のアプリで警告に関連するだけを追加しています。

Flash用のCSSは、通常のデスクトップ画面で正常に動作します。ポジションは中央に位置し、固定されています。下の画像：私は携帯電話の画面（500pxなどよりも低い）上のフラッシュを取り込むとき

はしかし、それは私が何をするかに関係なく左に偏心しています。下の画像：

なぜこれが起こっているのか混乱しています。デスクトップ画面と同じように、私はモバイル画面でフラッシュの位置を固定し、常に同じ場所に配置したいと考えています。続き

は、このコードのためのフラッシュ

<div id="flash-message-wrapper"> 
    <% flash.each do |type, message| %> 
     <div class="alert <%= alert_class_for(type) %> alert-dismissible fade in"> 
      <button type="button" class="close" data-dismiss="alert"> 
       <span aria-hidden="true">&times;</span> 
       <span class="sr-only">Close</span> 
      </button> 
      <%= message %> 
    <% end %> 
</div> 

のため、私が持っているビューのコードCSSです：

.alert { 
    padding: 15px; 
    margin-bottom: 20px; 
    border: 1px solid transparent; 
    border-radius: 4px; 
} 
.alert h4 { 
    margin-top: 0; 
    color: inherit; 
} 
.alert .alert-link { 
    font-weight: bold; 
} 
.alert > p, 
.alert > ul { 
    margin-bottom: 0; 
} 
.alert > p + p { 
    margin-top: 5px; 
} 
.alert-dismissable, 
.alert-dismissible { 
    padding-right: 35px; 
} 

.alert-dismissable .close, 
.alert-dismissible .close { 
    position: relative; 
    top: -2px; 
    right: -21px; 
    color: inherit; 
} 
.alert-success { 
    color: #3c763d; 
    background-color: #dff0d8; 
    border-color: #d6e9c6; 
} 
.alert-success hr { 
    border-top-color: #c9e2b3; 
} 
.alert-success .alert-link { 
    color: #2b542c; 
} 
.alert-info { 
    color: #31708f; 
    background-color: #d9edf7; 
    border-color: #bce8f1; 
} 
.alert-info hr { 
    border-top-color: #a6e1ec; 
} 
.alert-info .alert-link { 
    color: #245269; 
} 
.alert-warning { 
    color: #8a6d3b; 
    background-color: #fcf8e3; 
    border-color: #faebcc; 
} 
.alert-warning hr { 
    border-top-color: #f7e1b5; 
} 
.alert-warning .alert-link { 
    color: #66512c; 
} 
.alert-danger { 
    color: #a94442; 
    background-color: #f2dede; 
    border-color: #ebccd1; 
} 
.alert-danger hr { 
    border-top-color: #e4b9c0; 
} 
.alert-danger .alert-link { 
    color: #843534; 
} 

.fade { 
    opacity: 0; 
    -webkit-transition: opacity .15s linear; 
     -o-transition: opacity .15s linear; 
      transition: opacity .15s linear; 
} 
.fade.in { 
    opacity: 1; 
} 

.close { 
    float: right; 
    font-size: 21px; 
    font-weight: bold; 
    line-height: 1; 
    color: #000; 
    text-shadow: 0 1px 0 #fff; 
    filter: alpha(opacity=20); 
    opacity: .2; 
} 
.close:hover, 
.close:focus { 
    color: #000; 
    text-decoration: none; 
    cursor: pointer; 
    filter: alpha(opacity=50); 
    opacity: .5; 
} 
button.close { 
    -webkit-appearance: none; 
    padding: 0; 
    cursor: pointer; 
    background: transparent; 
    border: 0; 
} 

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0, 0, 0, 0); 
    border: 0; 
} 
.sr-only-focusable:active, 
.sr-only-focusable:focus { 
    position: static; 
    width: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    clip: auto; 
} 

#flash-message-wrapper { 
    position: fixed; 
    top: 50px; 
     left: 50%; 
     margin-left: -250px; 
    width: 600px; 
} 

@media (max-width: 500px) { 
    #flash-message-wrapper { 
     position: fixed; 
     top: 50px; 
      right: 50%; 
      margin-right: -250px; 
     width: 300px; 
    } 
} 

任意の助けをいただければ幸いです！

Answer 1

あなたはここで働いてfiddleあるこの

#flash-message-wrapper { 
    width: 600px; 
    margin: 10px auto 0 auto; 
} 

@media (max-width: 500px) { 
    #flash-message-wrapper { 
    width: 300px; 
    margin: 10px auto 0 auto; 
    } 
} 

に#flash-message-wrapperのスタイルを変更する必要があります。お役に立てれば。

更新

あなたの通知を置くしたい場合は、既存のスタイルにこれらの次のプロパティを追加する必要があります。

position: absolute; 
left: 0; 
right: 0; 

が更新されました。