Question

我是使用bootstrap的新手：）

我尝试使用引导带制作自己的模板。我把我的内容放在左侧。和我右边的菜单或导航栏。

我使用这个Html脚本：http://tokobootstrap.comuf.com/

                    <!DOCTYPE html>
                <!--[if lt IE 7]>      <html lang="ms" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
                <!--[if IE 7]>         <html lang="ms" class="no-js lt-ie9 lt-ie8"> <![endif]-->
                <!--[if IE 8]>         <html lang="ms" class="no-js lt-ie9"> <![endif]-->
                <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
                    <head>
                        <meta charset="UTF-8">
                        <meta http-equiv="X-UA-Compatible" content="text/html;">
                        <title>
                        My Website        </title>
                        <meta name="keywords" content="web developer, kl web developer, web application developer, web system developer, ecommerce, website developer, kuala lumpur developer">
                        <meta name="description" content="My description of my website">
                        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                        <link rel="canonical" href="http://localhost/baseweb/">
                        <link href="http://localhost/baseweb/inc/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    </head>
                    <body><div class="container">
                   <h1>Home!</h1><hr>
                   <div class="col-lg-9">
                      <div class="jumbotron">
                          <h1>Hello, world!</h1>
                          <p>...</p>
                          <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
                        </div>

                     <div class="row">
                        <div class="col-md-4">
                          <h2>Heading</h2>
                          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                        </div>
                        <div class="col-md-4">
                          <h2>Heading</h2>
                          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                       </div>
                        <div class="col-md-4">
                          <h2>Heading</h2>
                          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
                        </div>
                        </div>
                   </div><!-- content -->

                   <div class="col-lg-3">
                    <div class="panel panel-primary">
                  <div class="panel-heading">
                    <h3 class="panel-title">Sidebar</h3>
                  </div>
                            <div class="list-group">
                              <a href="http://localhost/baseweb/" class="list-group-item">
                                Home 
                              </a>
                              <a href="http://localhost/baseweb/about" class="list-group-item">About</a>

                            </div>
                </div>
                   </div><!-- sidebar -->
                </div><!-- container -->
                <script src="http://localhost/baseweb/inc/js/jquery-1.11.1.min.js"></script>
                <script src="http://localhost/baseweb/inc/js/bootstrap.min.js"></script>
                </body>
                </html>

在笔记本电脑屏幕分辨率时，这是正常的。左侧的内容和右侧的菜单或导航栏。

当我尝试在移动设备或小屏幕分辨率下打开它时。它变成了异常行为。

我希望上面的菜单来自我的内容。但事实上......内容下方的菜单。

我怎么能解决它？

非常感谢你。

Answer 1

尝试使用offcanvas模板，它可以向你显示它是如何工作的，因为可能如果你使用col-lg-9和col-lg-3它会真正做到的是这个

桌面视图 Col-lg-9 - 宽度有点像宽度的80％ Col-lg-3 - 宽度有点像宽度的20％

移动视图

由于bootstrap支持响应功能，因此Col-lg-9变为100％的屏幕宽度 Col-lg-3 - 由于bootstrap支持响应功能

，因此屏幕宽度变为100％

意外行为Bootstrap 3

1 个答案: