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%; with right: -73px;。它为我工作。

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

相关文章:

html - 为div添加边框时出现一个奇怪的位置问题

html - SQLSTATE [23000]:违反完整性约束:1062键“UNQ_INDEX_PROCESS_INDEXER_CODE”的重复条目“cataloginventory_stock”

javascript - 使用 jQuery 操作 HTML 表格

html - 单选按钮-对齐背景图片和文字

html - img 组件上的链接断开

html - div在我的登录表单前面?

html - 为什么显示: block is added to a list item in a list (<ul> or <ol>)?时列表样式消失

html - 导航栏未与 psd 对齐

html - Bootstrap : Well is not aligned to form

javascript - 从 HTML 复制的电子邮件在 Thunderbird 中不起作用