Как настроить страницу с помощью мобильного устройства с помощью Bootsrap?

-1

Я хочу, чтобы эта страница заполнила мобильный экран, чтобы кнопки и текст максимально расширялись на этом шаблоне.Как настроить страницу с помощью мобильного устройства с помощью Bootsrap?

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

источник

2016-04-29 Pelle Mårtenson

Предполагая, что вы знаете, как обновить раздел <head>...</head> в ваш HTML в метеора, добавьте следующий код в вашей голове:

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

Кроме того, я заметил, что вы HTML структура немного неправильно для начальной загрузки. Попробуйте что-то вроде этого и посмотрите, удастся ли вам:

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

источник

2016-04-29 07:49:59

Теперь я знаю, как обновить ! –

Изменения вы class="btn btn-info btn-lg" по class="btn btn-large btn-info" и поэтому всей ширине мобильного простирается

вы также можете вставить медиа запросов, чтобы установить CSS в мобильном режиме

Пример:

@media (max-width: 767px){ 

    }

Bootstrap

источник

2016-04-29 07:48:27 JMF

Это фактически сделало кнопки меньше. –

Как настроить страницу с помощью мобильного устройства с помощью Bootsrap?

ответ

Смежные вопросы