Question

＆＃13;

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

＆＃13;

我试图让一个模态对话框中的面板在手机上使用整个屏幕宽度，但在ipad或更高版本上我希望它使用大约90％的宽度。

问题在于响应大小通常是通过使用col-xs-12这样的类来改变的，这些类不会将大小放在屏幕的边缘。

我可以将面板设置为：

<div class="panel panel-primary">
    <div class="panel-heading" style="height:40px">
...
    </div>
</div>

Answer 1

最简单的方法是使用像这样的媒体查询

@media (max-width: 800px) {
    #divId {
        width or max-width: 90%;
    }

}

另一个好的选择就是使用屏幕的整个宽度，并将div包含在容器内。容器将在屏幕中居中，带有边距，填充等...您可以使用媒体进行编辑查询此参数，以便它们仅显示所需的屏幕尺寸。

要求我提出任何其他问题

bootstrap使面板在手机100％的屏幕上

1 个答案: