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をインストールしました：ブートストラップ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-large btn-info"によってclass="btn btn-info btn-lg"、あなたはまた、モバイルモードでCSSを設定するには、クエリのメディアを挿入することができ

ので、携帯の全体の幅が拡張し

例：

@media (max-width: 767px){ 

    }

Bootstrap

出典

2016-04-29 07:48:27 JMF

実際にボタンを小さくしました。 –

Bootsrapを使用してモバイル用のページを調整するにはどうすればよいですか？

答えて

関連する問題