2
我有一個奇怪的問題.. 我第一次使用bootstrap，它確實非常棒。在對我的測試網站進行編碼時，我發現顯示器尺寸有問題..這就是：Bootstrap中的修改元素
- 我將導航html代碼直接複製到新行 - 我刪除了開關的漢堡圖標toggle -show/dont顯示 - 從第二個新創建的圖標 -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度？
請發送jsfiddle或類似網站的鏈接，我可以正確檢查您的網頁。 –