更新新请求

Question

查看问题图片

我试图让侧面导航栏完全向左移动（由于某种原因似乎是一个间隙）并且它一直向下延伸到页面。我似乎无法想象这一个。我不明白为什么左边有一个小的间隙，为什么它没有延伸到页面的底部。

我尝试添加“left”但是它只是破坏了所有的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>

链接

Admin

  </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%;
}

Answer 1

提供课程

.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));
});

Answer 2

将padding-left:0;添加到css .sidenav，这将使您的最终css如下所示：

.sidenav
{
  length:100%;
  padding-right:40px;
  width:100%;
  padding-left:0;
}

这里解决了fiddle。

P.S：我会建议Alessio的答案。

Bootstrap Side导航栏问题

2 个答案:

更新新请求