bootstrap在手机100%屏幕上制作面板
bootstrap在手机100%屏幕上制作面板
提问于 2017-03-08 15:15:56
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading" style="height:40px">
...
</div>
</div>
我正在尝试让模式对话框中的面板在手机上使用整个屏幕宽度，但在ipad或更高版本上，我希望它使用大约90%的宽度。
问题是，响应的大小通常是通过使用诸如col-xs-12之类的类来更改的，这些类不会将大小放在屏幕的边缘。
我将may面板设置为：
<div class="panel panel-primary">
<div class="panel-heading" style="height:40px">
...
</div>
</div>回答 1
Stack Overflow用户
发布于 2017-03-08 15:40:03
最简单的方法是使用媒体查询，如下所示
@media (max-width: 800px) {
#divId {
width or max-width: 90%;
}
}另一个好的选择是使用屏幕的整个宽度，并在容器中包含div。容器将居中在屏幕上的边缘，填充等。您可以使用媒体查询编辑此参数，以便它们仅在所需的屏幕大小下显示。
如果有任何其他问题，请回答我
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42665185
复制相关文章
相似问题
腾讯云开发者
