javascript - Bootstrap Flash 警报 CSS 在移动屏幕上无法正常工作

Question

我目前正在构建一个 Rails 应用程序。在我的应用程序中，我使用 Bootstrap 的 CSS 在警报时显示 Flash 消息。我没有完全使用 Bootstrap 的 CSS，但由于 CSS 重叠，仅在我的应用程序中添加与警报相关的内容。

Flash 的 CSS 在普通桌面屏幕上工作得很好。它的位置是居中且固定的。下图:

但是，当我在移动屏幕(小于 500 像素)上填充 Flash 时，无论我做什么，它都会偏向左侧。下图:

我很困惑为什么会发生这种情况。就像桌面屏幕一样，我想修复移动屏幕中闪光灯的位置，并始终填充在同一个位置。

以下是我的 Flash View 代码

<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 。希望这会有所帮助。

Update

如果您想悬停通知，您需要将以下属性添加到现有样式中。

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

已更新fiddle .