Bootstrap折疊面板在移動設備上不起作用

Question

嗨，我打算制作一個網站的移動版本。 我使用了Bootstrap中的折疊面板，因此用戶可以輕松查看指定的內容。 一切都可以在桌面模式下完美運行，但是當我進入移動設備時，如果切換折疊div，則字體和內容會因我不明白的原因而縮小。 我嘗試了不同版本的導入（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>

謝謝您的幫助。

Answer 1

在進行響應式Web開發時，將viewport定義為device-width很重要。

將其添加到頭部：

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以在以下位置找到引導程序bioler模板： http ://getbootstrap.com/getting-started/

Bootstrap折疊面板在移動設備上不起作用

問題描述

1 個解決方案

解決方案1
2 已采納 2016-06-28 04:30:33

Bootstrap折疊面板在移動設備上不起作用

問題描述

1 個解決方案

解決方案1 2 已采納 2016-06-28 04:30:33

解決方案1
2 已采納 2016-06-28 04:30:33