Question

我创建了bootstrap按钮，它在desktop中工作正常，但按钮未在media设备（手机，平板电脑）中显示。这是我的按钮this answer

这是我的代码：

<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>

Answer 1

问题在于位置：固定;底部：30％;左：90％; 用这样的东西代替它。位置：固定;底部：30％;右：-5％;

Answer 2

问题似乎是按钮的样式，更确切地说是left: 90%;。替换left: 90%; with right: -73px;。它对我有用。

Bootstrap按钮在媒体设备中不起作用？

2 个答案: