我有一个奇怪的问题。我第一次使用引导程序,它确实非常棒。在编写我的测试网站时,我发现显示器尺寸有问题。那就是:
-我将导航html代码直接复制到新行-我从第二个新创建的图标中删除了开关切换-显示/不显示-的汉堡图标-我修改了当前元素的主要内容-每当我强迫小显示器,例如交替告诉网站我从小显示器打开时,第二个栏的元素完全消失。而且由于我已经删除了切换按钮,因此我无法激活它,也无法执行任何操作,只能最大化大小以使其再次出现。
问题是,我希望它完全出现。没有切换的东西,只有从小显示器预览时才会压缩自己,就像我点击汉堡图标时的导航栏一样
有什么想法怎么做吗?谢谢,很抱歉我可怕的烦人问题。我知道这很烦人,但是,我刚刚开始学习这种语言,在这个过程中我可能会面临一些事情。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>title</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/sidebar.css">
<link rel="stylesheet" href="css/custom.css">
<link rel="stylesheet" media="screen" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div>
<nav class="navbarmain navbar navbar-default mainnav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">S-Bolb</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Feed <span class="sr-only">(current)</span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1</a>
</li>
<li><a href="#">Page 2</a>
</li>
<li><a href="#">Page 3</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Add Page</a>
</li>
<li><a href="#">Manage Pages</a>
</li>
</ul>
</li>
<li><a href="#">Trending</a>
</li>
<li><a href="#">co.Groups</a>
</li>
<li><a href="#">Find Friends</a>
</li>
<li><a href="#">Analytics</a>
</li>
<li><a href="#">Events</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="wrapper">
<div class="userpanel">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Ahmed T.</a>
</li>
<a href="#">Senior Designer</a>
<br>
<a href="#">View my profile</a>
<br>
<a>1</a>-<a>2</a>-<a>3</a>-<a>4</a>-<a>5</a>
<br>
<li role="separator" class="divider"></li>
<a href="#">Connected Networks</a>
<li><a href="#">Facebook /username</a>
</li>
<li><a href="#">Twitter /username</a>
</li>
<li><a href="#">Instagram /username</a>
</li>
<li><a href="#">Tumblr /username</a>
</li>
<li><a href="#">Behance /username</a>
</li>
<a href="#">add more</a>
</ul>
<ul class="sidebar-nav">
<li><a href="#">Liked Pages</a>
</li>
<li><a href="#">App Center</a>
</li>
<li><a href="#">Games Feed</a>
</li>
<li><a href="#">Customize Profile</a>
</li>
</ul>
<ul class="sidebar-nav">
<li><a href="#">Social Groups</a>
</li>
<li><a href="#">Group 1</a>
</li>
<li><a href="#">Group 2</a>
</li>
<li><a>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</a>
</li>
</ul>
<ul class="sidebar-nav">
<li><a href="#">My Account</a>
</li>
<li><a href="#">Settings</a>
</li>
<li><a href="#">Privacy Policy</a>
</li>
<li><a href="#">Advertising</a>
</li>
</ul>
<a class="block-button" href="#">Logout</a>
</div>
<!-- feed -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<nav class="usercontrolbar navbar navbar-default">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">view all <span class="sr-only">(current)</span></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">close friends (3) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Suzan William</a>
</li>
<li><a href="#">Boza Suman</a>
</li>
<li><a href="#">Cameron Wheeler</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">custom category (15) <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
<li><a href="#">Group</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a style="font-size:22px;">Welcome back, Ahmed! <span class="glyphicon glyphicon-hand-left" id="menu-toggle" aria-hidden="true"></span></a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/geometryangle.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu toggle script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("active");
});
</script>
</body>
</html>
和侧边栏.css:
.row{
margin-right:0px;
margin-right:0px;
}
#wrapper {
transition: all .4s ease 0s;
height: 100%
}
#sidebar-wrapper {
margin-right: -200px;
right: 70px;
width: 150px;
background: #222;
position: fixed;
height: 100%;
z-index: 10000;
transition: all .4s ease 0s;
}
.sidebar-nav {
display: block;
float: right;
width: 150px;
list-style: none;
margin: 0;
padding: 0;
}
#page-content-wrapper {
padding-right: 0;
margin-right: 0;
width: 100%;
height: auto;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
}
#page-content-wrapper {
width: 100%;
}
#sidebar_menu li a, .sidebar-nav li a {
color: #999;
display: block;
float: right;
text-decoration: none;
width: 150px;
background: #252525;
border-top: 1px solid #373737;
border-bottom: 1px solid #1A1A1A;
-webkit-transition: background .5s;
-moz-transition: background .5s;
-o-transition: background .5s;
-ms-transition: background .5s;
transition: background .5s;
}
.sidebar_name {
padding-top: 25px;
color: #fff;
opacity: .7;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.choixMenu{
font-size: 12px;
float: right;
text-align-right;
margin-right: 1px;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#main_icon
{
float:right;
padding-right: 65px;
padding-top:20px;
}
.sub_icon
{
float:right;
padding-right: 65px;
padding-top:10px;
}
.content-header {
height: 65px;
line-height: 65px;
}
.content-header h1 {
margin: 0;
margin-right: 20px;
line-height: 65px;
display: inline-block;
}
@media (max-width:767px) {
#wrapper {
padding-right: 70px;
transition: all .4s ease 0s;
}
#sidebar-wrapper {
right: 70px;
}
#wrapper.active {
padding-right: 150px;
}
#wrapper.active #sidebar-wrapper {
right: 150px;
width: 150px;
transition: all .4s ease 0s;
}
}
第二件事是:如何使边框清晰?每当我在 CSS 中添加新规则以使所有布局都没有边框时,它都不起作用,为什么它从边缘很柔软而不是完全 90 度?
回答第二个问题:
要制作navbar
的角落,您需要添加.navbar-static-top
类,如下所示:
<div class="navbar navbar-default navbar-static-top">
<!-- enter code here -->
</div>
我建议重新安装css文件以恢复切换功能。一旦你有了,在Bootstrap CSS文件中,你可以改变切换函数何时激活,这给了你在特定屏幕尺寸上调用切换的选项。
第二个问题,您可以将导航栏默认/反向设置为导航栏静态顶部,或者如果您希望它粘在顶部,请将 CSS 更改为border-radius:0px !important
希望这有帮助