意外行为引导3
意外行为引导3
提问于 2015-04-21 06:55:59
我试着用引导带制作我自己的模板。我把我的内容放在左边。我的菜单和右边的肚脐。
我使用这个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 »</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 »</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 »</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>当在笔记本电脑屏幕分辨率时，这是正常的。左边的内容和右边的菜单或肚脐。
当我尝试用移动或小屏幕分辨率打开它时。这就变成了不正常的行为。
我希望我的菜单在上面从我的内容。但事实上..。内容下面的菜单。
我怎么才能修好它？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-04-21 07:20:33
试着使用离画布模板，它可以向您展示它是如何工作的，因为如果您使用col 9和col 3，那么它实际上所做的就是
桌面视图Col-lg-9 -宽度大约是屏幕宽度的80% - Col-lg-3宽度有点像屏幕宽度的20%
移动视图
Col-lg-9 -由于引导支持响应功能Col-lg-3 -由于引导支持响应功能而变成100%屏幕宽度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29765008
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号