代码之家 › 专栏 › 技术社区 › forgottofly

弹出窗口不符合保存文本

responsive-design css

0

forgottofly · 技术社区 · 7 年前

我已经在纯HTML中使用boostrap弹出类定制了弹出/语音框。

弹出窗口似乎与动作文本不符 保存记录

我试着换了个位置,但没有成功。

 <div class="popover fade bottom in" role="tooltip" style="top: 17.5938px; left: 0; display: inline-table;width: 36%;padding: 0px;text-align: center;border-radius: 0px;padding-bottom: 5px">
            <div class="arrow" style="left: 50%;"></div>
            <h3 class="popover-title" style="display: none;"></h3>
            <div class="popover-content">
                <p>Are you sure you wish to save the records?</p>
                <div style="display:inline-flex">
                    <button class="btn btn-sm btn-primary btn-save btn-square"  style="background-color:#0076C9;border: none;padding: 5px 25px 5px 25px;margin-left: 0px">Yes</button>
                    <button class="btn btn-sm btn-default btn-save btn-square"  style="color:#0076C9;padding: 5px 15px 5px 15px;margin-left: 8px">Cancel</button>
                </div>
            </div>
        </div>

JsFiddle

1 回复 | 直到 7 年前

1

Sergey Zdobnov 7 年前

我看不出模态与文本有什么关系。最简单的方法(据我所知)是创建一个包装器,其中text&莫代尔是兄弟姐妹。然后设置 position: relative 包装,; position: absolute 到模态。你也应该改变 top bottom 对于模态。这里我做了一个超级简单的例子: https://jsbin.com/yegufisumi/1/edit?html,css,output