html - Bootstrap 按钮在媒体设备中不起作用?

标签 html css twitter-bootstrap button

我已经创建了 bootstrap 按钮,它在 desktop 中工作正常,但在 media 设备(手机,平板电脑)中没有显示按钮。这是我的按钮 IMG

这是我的代码:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>              
</head>
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container-fluid"> 
<div class="row">    
<div class="col-xs-12"> <button type="button" class="btn btn-primary pull-right" style="width:200px;font-size:30px; transform: rotate(-90deg);
transform-origin: right, top;
-ms-transform: rotate(-90deg);
-ms-transform-origin:left, top;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin:left,center;
position: fixed; bottom: 30%; left: 90%;
color:white;" class="btn btn-success">Order</button>
</div>
</div>
</div>
</nav>

最佳答案

问题似乎出在您的按钮样式上,更确切地说是left: 90%;。替换 left: 90%;右边:-73px;。它对我有用。

关于html - Bootstrap 按钮在媒体设备中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40802386/

相关文章:

javascript - 在同一个列表上使用多个灯箱会导致问题

css - 如何用css叠加两种字体

javascript - 在一行中显示所有元素,但保留最后一项空间?

jquery - Bootstrap 表单控制类与 Knockout 数据绑定(bind)冲突

javascript - 如果浏览器调整大小,如何使我的选择框在我的固定页脚溢出

css - Internet Explorer 10 不在内联元素上应用 flexbox

javascript - 如何使用js固定和取消固定元素

html - 如何使用 CSS 和 HTML 并排对齐图像和广告

javascript - 检查 div 是否显示其所有内容的最佳实践

javascript - Bootstrap 模式不起作用?