gpt4 book ai didi

css - 如何使用 Bootstrap 为移动设备调整页面?

转载 作者:行者123 更新时间:2023-11-28 16:07:54 24 4
gpt4 key购买 nike

我想让这个页面充满移动屏幕,这样按钮和文本就可以在这个模板上最大化。

<template name="adminClub">
<div class="container">
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</template>

我希望我看起来像这样(没有缩放)

enter image description here

不是这样的。

enter image description here现在 div 似乎填满了页面的大部分内容。我已经安装了 twbs:bootstrap 3.3.6。

最佳答案

假设您知道如何更新 <head>...</head>在 meteor 的 html 部分中,在您的头部添加以下内容:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

我还注意到您的 html 结构对于 Bootstrap 来说有点不正确。尝试这样的事情,看看你是否有运气:

<template name="adminClub">
<div class="container">
<div class="row">
<div class="col-xs-12>
<div class="well well-sm">
<h3>{{clubname}}</h3>
<a id="plus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<br>
{{occupancy}}%
<input type="text" value="{{visitors}}" id="visitors">
of {{capacity}}
<br>
<a id="minus" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
</div>
</div>
</div>
</template>

关于css - 如何使用 Bootstrap 为移动设备调整页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36932438/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com