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

在进行自适应网络开发时，将viewport定义为device-width非常重要。

将此添加到头部：

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

您可以在此处找到bootstrap bioler模板：http://getbootstrap.com/getting-started/

Bootstrap折叠面板无法在移动设备上运行

1 个答案: