javascript - 从自定义按钮禁用 Bootstrap

标签 javascript html bootstrap-4

如何禁用 Bootstrap 调整 div 元素内的按钮大小。它是一个订单按钮,如果在移动设备中使用,它几乎不可见。

它实际上是一个a标签,里面有一个img

这是以下脚本:

<div class="buttonImage" style="color:green" style="font-size: 2">
    <a href="transaction.html?totalprice=3000">
        <img src="img/orderbutton.png" width="15%" height="15%" onmouseover="this.src='img/orderbuttonhover.png'" onmouseout="this.src='img/orderbutton.png'" alt="OrderButton"/>
    </a>
    <label class="cash">3000 Points</label>
</div>

有什么建议不要调整此按钮的大小吗?我的 div 元素不会调整大小,但按钮会调整。而且,最左边的按钮先于中间和右边的按钮调整大小(水平 3 个 div,垂直 6 个 div)。

最佳答案

删除 width="15%"height="15%" 并添加 img-responsive 类,并将移动类应用于移动屏幕的父 div。

<div class='col-lg-2 col-xs-12'>
    <div class="buttonImage" style="color:green" style="font-size: 2">
        <a href="transaction.html?totalprice=3000">
            <img class='img-responsive' src="img/orderbutton.png" alt="OrderButton"/>
        </a>
        <label class="cash">3000 Points</label>
    </div>
</div>

此格式将确保当您从任何小于桌面的两列查看 block 时,它将获得最大宽度,因此它不会很小。

关于javascript - 从自定义按钮禁用 Bootstrap,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43412361/

相关文章:

javascript - 如何使用纯 JavaScript 和 CSS 制作轮播?

javascript - 数据绑定(bind)禁用属性在 foreach 内的按钮中不起作用

javascript - 将动态 HTML 页面转换为 React/JSX

html - Web Worker 中的传感器读取

javascript - 如何同步这两个引导轮播?

javascript - 按数字顺序对本地存储键进行排序

html - 并排排列标签和输入的最佳方式

javascript - 悬停另一个 div 时将类添加到 div (Javascript)

html - 如何将内部设置为全宽

javascript - 复选框结构,如果选中单个子复选框,则应自动选中父复选框