Bootstrap导航栏下拉填充问题

我的下拉菜单覆盖整个菜单，在屏幕的左侧和右侧有很少的未覆盖的像素，我不希望这样，我给最小宽度：100％左缘，右，左，中右它没有工作Bootstrap导航栏下拉填充问题

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</head> 
<body> 
<nav class="nav navbar-default"> 
<div class="container-fluid"> 
<!-- Adding Logo --> 
<div class="row"> 
<div class="col-md-2"> 

</div> 
          <div class="input-group col-md-8" style="padding-top:0.5%; padding-bottom:0.5%;"> 
           <input type="text" class="form-control" placeholder="Search" /> 
           <span class="input-group-btn"> 
            <button class="btn btn-danger" type="button"> 
             <span class=" glyphicon glyphicon-search"></span> 
            </button> 
           </span> 

          </div> 
</div> 
</div> 
</nav> 
<nav class="navbar navbar-inverse textassign" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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 textassign" href="#">XploreSoftware</a> 
    </div> 
    <!--/.navbar-header--> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 


      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle textassign" data-toggle="dropdown">Courses<span class="caret"></span></a> 
       <ul class="dropdown-menu style="left:0px;right:0px;" id="Courses"> 

        <div class="row-fluid" id="StyleCourse"> 
         <div class="col-md-4" id="SingleCourse"> 
         <p >INFORMATION TECHNOLOGY</p> 

         <p>Java</p> 
         <p>C++</p> 
         <p>Angular JS</p> 
         <p>Javascript</p> 
         <p>React</p> 
         <p>Bootstrap</p> 
         </div> 
         <div class="col-md-4"> 
          <p>ELECTRICAL ENGINEERING</>      
          </div> 
         <div class="col-md-4"> 
          <p>MECHANICAL ENGINEERING</> 
         </div> 
        </div> 
       </ul> 
      </li> 
      <li class="textassign"><a href="#">Solutions</a></li> 
      <li class="textassign"><a href="#">Authors</a></li> 
      <li class="textassign"><a href="#">Challenges</a></li> 
     </ul> 
    </div> 
    <!--/.navbar-collapse--> 
</nav>

CSS：

[#navbar{ 
    background-color: black; 
} 
#logo{ 
    margin-top: -14px; 
} 
.background{ 
    font-style: italic; 
} 
#SingleCourse{ 

} 
.tabs{ 
    background-color: #fff; 
} 
/* #subject>li>a:hover{ 
    background-color:seagreen; 
} */ 
#subject>li>a{ 
    color:white; 
} 
enter image description here 
#NavElementColor>li>a{ 
    color: white; 

} 
.textassign{ 
    color: white; 
} 
li.dropdown{ 
    position:static; 
} 

#Courses { 
    min-width: 100%; 
     background-color: black; 

} 
#StyleCourse{ 
    background-color: black; 

} 

.dropdown:hover .dropdown-menu { 
    display: block; 
    margin-top: 0; // remove the gap so it doesn't close 
}][1]

这里是链接的图片：

https://drive.google.com/file/d/0B6BvqMylrMU7a0dNc2xicjhXdGM/view?usp=sharing

来源

2017-02-10 Yashwanth Potu

请使用片段工具（'<>'按钮）创建一个[mcve]，使所描述的问题可以被检查。很难通过检查死代码来判断是什么原因造成的。最有可能的是，你正在处理一个特定的'margin'/'padding'问题。 –

您的网页包含无效html这可能使其无法正常显示：

你不关闭在#Courses的class属性：

<ul class="dropdown-menu style="left:0px;right:0px;" id="Courses">

个你不关闭2个<p>标签：

<p>ELECTRICAL ENGINEERING</>

我不能完全肯定，如果你的要求是，当你解决以上，或者如果您请求删除15px第一个和最后padding小号概述的问题固定来自#SingleCourse的孩子。如果这是你想要什么，你应该使用这个CSS

#StyleCourse>div:first-child { 
    padding-left: 0; 
} 
#StyleCourse>div:last-child { 
    padding-right: 0; 
}

如果我误解了你的问题，请提供更多的细节，或者创建一个片段。

来源

2017-02-10 21:40:28

Bootstrap导航栏下拉填充问题

回答

相关问题