Bootstrap flash alert CSS在手機屏幕上無法正常工作

Question

我目前正在構建一個Rails應用程序。在我的應用程序中，我使用Bootstrap的CSS上的警報顯示Flash消息。我沒有完全使用Bootstrap的CSS，但由於CSS中的重疊，僅在我的應用中添加了與警報相關的內容。

用於Flash的CSS適用於普通桌面屏幕。它的位置是居中和固定的。圖片下面：

然而，當我填寫的手機屏幕（比500像素較小）閃光燈的話，那是偏離中心向左不管我做什麼。下面的圖片：

我很困惑，爲什麼發生這種情況。就像descktop屏幕一樣，我想要在手機屏幕上修正閃光燈的位置，並始終將其放在同一個地方。

以下是視圖代碼我有閃光燈

<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

您需要的#flash-message-wrapper風格改變這種

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

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

下面是一個工作fiddle。希望這可以幫助。

更新

如果要懸停您的通知，你需要把這些以下屬性添加到您的現有樣式。

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

更新fiddle。