Question

我想让这个页面填满移动屏幕，以便按钮和文本在此模板上最大化。

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

我希望我看起来像这样（没有zomming）

而不是这样。

现在div似乎填满了页面的大部分内容。我安装了twbs：bootstrap 3.3.6。

Answer 1

假设您知道如何更新meteor中html中的<head>...</head>部分，请在脑中添加以下内容：

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

Answer 2

将您class="btn btn-info btn-lg"改为class="btn btn-large btn-info"，以便移动设备的整个宽度扩展

您还可以插入查询媒体以在移动模式下设置CSS

示例：

@media (max-width: 767px){

    }

Bootstrap

如何使用Bootsrap为移动设备调整页面？

2 个答案: