1
こんにちは、私はウェブサイトのモバイル版を作るのが大好きです。ブートストラップの折りたたみパネルを使用して、ユーザーが指定したコンテンツを簡単に表示できるようにしました。すべてがデスクトップモードではうまく動作しますが、モバイルに入ると、折り畳み部を切り替えると、フォントやコンテンツが縮小してしまい、わかりません。私はさまざまなバージョンのインポート（bootstrap、jquery）を試みましたが、既存の関連する問題を読んでいましたが、これまでのところ何の答えも見つかりませんでした。ここ
は、コード（実際の電話上でテスト）の現在の行動の絵です：
http://imgur.com/Mfnj4hAモバイルでブートストラップの折り畳みパネルが動作しない
ここでコードは次のとおりです。
<html lang="en">
<head>
<!-- STYLE IMPORT -->
<link rel="stylesheet" href="../libs/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../libs/font-awesome/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" href="../img/brand-image.png" />
<!-- SCRIPT IMPORT -->
<style>
.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}
</style>
</head>
<body>
<div class="fluid-container">
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" data-target="#collapseOne" href="#collapseOne">Panel 1</a></div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Lorem Ipsum</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor faucibus lacus in lacinia. Mauris sed sem nibh. In sem sapien, aliquam et placerat vitae, rutrum eget nunc. Maecenas consequat molestie fringilla. Nunc non pellentesque augue. Fusce egestas, urna pellentesque aliquam interdum, mi enim efficitur sem, et pretium orci diam eu ipsum. Vestibulum lobortis pellentesque massa sed gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque tortor mi, consectetur at molestie sit amet, aliquet eu felis. Integer euismod rhoncus egestas. Donec porta ligula vel libero maximus molestie. Fusce porttitor dictum magna vitae maximus. Cras pulvinar consectetur orci, ac tincidunt libero condimentum nec. Sed molestie lacinia neque sed sollicitudin.
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"><i class="fa fa-check" style="padding-right:25px"></i> Morbi quis magna</div>
<div class="panel-body">
Morbi quis magna scelerisque, egestas leo id, sodales lectus. Aliquam vel commodo leo. Vestibulum imperdiet maximus felis, quis ullamcorper tellus sodales in. Nunc aliquet, lectus a maximus pellentesque, dolor neque tempor sem, vitae dignissim enim neque et arcu. Nullam at sagittis tortor, sed imperdiet turpis. Quisque non leo sollicitudin, tincidunt felis a, fringilla tellus. Phasellus ipsum lorem, sodales non dolor nec, viverra rutrum magna. Phasellus quam purus, efficitur ac sodales ac, pretium ac tellus. Aenean pulvinar felis sollicitudin tellus bibendum, ac vestibulum nulla facilisis. Mauris maximus, dui in gravida molestie, tellus nisl convallis ex, ut fermentum orci odio at mauris. Donec et erat eget diam ultrices auctor et vitae felis. Nullam et arcu ligula. Proin nec tristique dui, ut luctus velit.
</div>
</div>
<div class="fluid-container">
<button type="button" class="btn btn-primary" style="width:100%;font-size:20pt;padding:20px" data-toggle="collapse" data-target="#collapseOne" href="#collapseOne"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
はあなたの助けをいただき、ありがとうございます。
：あなたは.panelを追加することができます見出しは{display：block; }あなたのCSSに。そして、それはパネル全体をクリック可能にするでしょう。モバイルユーザーエクスペリエンスのためにより十分です。そして、あなたの問題を解決した答えを投票して受け入れてください。ありがとう！ –
参照：http://stackoverflow.com/a/41762459/187650 – juFo