Question

我点击按钮后显示div。此div与其他div重叠，我会像弹出窗口一样显示它。虽然它在桌面浏览器上看起来不错但在我选择设备模式为iPhone 6时效果不佳。

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red;  text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div>
<div class="row" id="staticdiv">
    Some text and image
</div>

名为div的{{1}}我试图将divPopUp置于div之上。它在桌面浏览器上看起来不错，但在设置为iPhone的设备模式下查看时看起来非常混乱。我正在使用bootstrap。我该怎么做才能解决这个问题，所以它在iPhone上看起来也不错。

Answer 1

做这样的事情：

上一页 HTML ：

<div class="row" id="divPopUp" runat="server" style="height: 50px; background-color: red;  text-align: center; margin-bottom: 10px; font-size: 30px; color: white; position: fixed; width: 35%; margin-top: 45px; margin-left: 40px;padding-top: 5px">Thanks for help</div>

<强>更新

＆＃13;

.popup-block {
    height: 50px;
    background-color: #F00;
    text-align: center;
    font-size: 30px;
    color: #FFF;
    position: fixed;
    width: 35%;
    margin: 0 auto;
    padding: 0;
    left: 0;
    right: 0;
    line-height: 50px;
}


 @media only screen and (max-width: 767px) {
       
       .popup-block { width: 94%; /* Or whatever floats your boat*/ }

 }

＆＃13;

  <div class="row popup-block" id="divPopUp" runat="server">Thanks for help</div>

＆＃13;

希望这样做可以解决您的问题。

div在移动视图上无法正确显示

1 个答案: