我有一个奇怪的问题.. 我第一次使用bootstrap，确实非常棒。在对我的测试网站进行编码时，我在显示器大小调整中发现了一些错误..那就是：
- 我将导航html代码直接复制到新行 - 我从第二个新创建的图标中删除了切换切换的汉堡包图标 - 显示/不显示 - -I修改了当前元素的主要内容 - 每当我强迫显示器变小时，就像我从一个小显示器上打开的地方一样，第二个酒吧的元素完全消失了。由于我已经删除了切换按钮，我无法激活它，也无法做任何事情，只是最大化尺寸，以便再次出现。
事情是，我希望它完全出现。没有切换的东西，只有当我点击汉堡包图标时，就像导航栏一样从小型显示器预览时压缩自己有什么想法怎么做？谢谢，抱歉我讨厌的问题。我知道这很烦人，但我刚开始学习这门语言，我可能会在这个过程中面对一些事情。
<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>
和sidebar.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度？
答案 0 :(得分：0)
回答第二个问题：
要制作.navbar-static-top的角落，您需要添加<div class="navbar navbar-default navbar-static-top">
<!-- enter code here -->
</div>
类，如下所示：
ionic serve答案 1 :(得分：0)
我建议重新安装css文件以恢复切换功能。 完成后，在Bootstrap CSS文件中，您可以在切换功能激活时进行更改，这样您就可以选择在特定屏幕尺寸上调用切换。
第二个问题，您可以将navbar-default / inverse设置为navbar-static-top，或者如果您希望它保持在顶部，请将CSS更改为border-radius:0px !important
希望这有帮助