查看问题图片
我试图让侧边导航栏完全向左移动(由于某种原因似乎是一个空隙)，并使其垂直向下延伸到页面下方。 我似乎无法弄清楚这一点。我不明白为什么左侧有一个小间隙，为什么它没有延伸到页面底部。
我曾尝试添加“左”，但这只会破坏所有 Navbars 样式。目前它与顶部导航栏匹配，这正是我想要的。
如有任何帮助，我们将不胜感激。
HTML -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js"></script>
<script src="https://use.fontawesome.com/c6d65aa6d0.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title> Domain Checker Tool</title>
</head>
<body>
<!-- Nav bar, Using bootstrap -->
<nav class="navbar navbar" style="border-radius:0px;">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<a href="/" class="navbar-left"><img src="logo"></a>
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/domaindiagnostics">Domain Diagnostics</a></li>
<li><a href="/serverdiagnostics">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="/addserver">Add Server</a></li>
<li><a id="bt" href="#">Something cool</a></li>
<li><a id="tl" href="#">Something cool</a></li>
</ul>
</li>
</ul>
<div class="searchnavbutton">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search for Server or IP">
</div>
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</div>
</div>
</nav>
<div class="container-fluid sidenav">
<div class="row">
<div class="col-md-3">
<ul class="nav navbar nav-stacked" style="border-radius:0px;">
<li><a href="/">Home</a></li>
<li><a href="">Widgets</a></li>
<li><a href="">Pages</a></li>
</ul>
</div>
<div class="col-md-9">
Text
</div>
</div>
</div>
和 CSS
/* Styles the Pre component, e.g whois/SSL/Ping/trace */
pre
{
display:flex;
white-space:pre-wrap;
background-color:white;
font-weight:bold;
color:black;
font-family:bookman;
}
/* stops the logo being right at the top */
/** NAVBAR SETTINGS **/
.sidenav
{
length:100%;
padding-right:40px;
width:100%;
}
.navbar
{
padding-top:3%;
padding-bottom:2%;
padding-left:5%;
background-color:#005c99;
margin-bottom:0;
width:100%;
}
a
{
font-weight:bold;
color:white;
}
/* DNS table heading styling */
th
{
background-color:#005c99;
color:white;
font-weight:bold;
}
/* Main headings*/
h3
{
background-color:#005c99;
color:white;
font-weight:bold;
padding-bottom:0;
margin-bottom:0;
padding-left:10px;
}
/* Header in DNS where it says what type of records they are */
h5
{
padding-left:10px;
font-weight:bold;
}
/* Container for dns records, creates border ect */
.dnscontain
{
border-style:solid;
border-color:#005c99;
}
/* styling for all tables */
.table
{
font-size:12px;
}
/* the query box styling */
.domainquery
{
width: 100%;
background-color:#005c99;
margin-bottom:3%;
padding:50px;
margin-top:0%;
}
/* Search button */
.searchnavbutton
{
margin-left:40px;
padding-left:40px;
}
/* styling of the logo */
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
/* for the RECORD MISSING */
.alert alert-danger
{
align:center;
text-align:center;
}
/* search history container within the top H3 Heading */
#searchHistory
{
text-align:center;
float:right;
margin-right:1%;
margin-top:1%;
font-size:12px;
font-weight:bold;
background-color:#005c99;
border-style:solid;
border-color:#005c99;
}
.historyContent
{
margin-top:2%;
}
/* styling for the div that contains the loading spinners */
.spinnercontain
{
vertical-align: bottom;
text-align: center;
}
.addserverform
{
margin-top:7%;
}
最佳答案
上课
.col-md-3 {
padding: 0;
}
.container-fluid.sidenav 里面的那个
因为您继承了 Bootstrap CSS。
更新新请求
如果你想让侧边栏有背景直到页面结束你可以使用JS:
var headerHeight, windowHeight;
jQuery(document).ready(function() {
headerHeight = jQuery('nav').height();
windowHeight = jQuery(window).height();
jQuery('.sidenav .navbar').css('height',(windowHeight-headerHeight));
});
如果您需要它，这里是在页面调整大小时调用的代码:
jQuery(window).resize(function () {
headerHeight = jQuery('nav').height();
windowHeight = jQuery(window).height();
jQuery('.sidenav .navbar').css('height',(windowHeight-headerHeight));
});
关于html - Bootstrap 侧导航栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47487677/