通过媒体查询覆盖内联样式

Question

我有点小问题。我们知道内联样式优先考虑样式表。我正在使用Bootstrap并在我的布局中使用.alert .alert-danger .alert-success类来通知某个页面上的状态。在一个领域，我已经应用了一个内联样式，因为它是我在页面的那一部分需要它的一次性，以便更好地控制我的需要。

$divStyle = "padding:5px; width:50%; margin:auto; margin-bottom:20px";

<div class='alert alert-danger' style='{$divStyle}'...

这自然在桌面上运行得很好，但是当我使用移动设备时，内联样式优先于当然和移动设备，因为我使用宽度50％它不再跨越屏幕的宽度当然。在样式表中，因为我在我的服务器上本地托管Bootstrap，所以我可以有更多的控制，我添加了这个。

    @media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 
    .alert .alert-danger {
       width:100%;
}
}

希望这会覆盖移动设备的内联样式。当然，由于内联样式将优先考虑，因为它无法工作，因为我无法工作，因为我无法工作，因为无论屏幕如何，无论如何它都是100％宽度，但是，因为我已应用内联样式，样式表中的任何内容都将被覆盖。

所以我的问题是。有没有人知道我可以应用任何技巧来覆盖这种将应用于移动设备的内联样式，而不会牺牲桌面布局的内联样式，因为你不能使用内联以太网媒体查询。

修改

我尝试将！important标记添加到媒体查询中，因此它优先于移动设备上的内联样式，但仍然没有覆盖移动设备上的内联样式。

    @media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 
    .alert .alert-danger {
       width:100% !important;
}
}

-Thanks！