Bootstrap在右侧的容器流体添加填充

你好我想设计一个网页一切正常，但容器流体正在增加额外的填充在右边。 Bootstrap在右侧的容器流体添加填充

正如您在图片中看到的那样，在导航栏结束后有一个间隙。

这是我的index.html：

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <!--Custom Stylesheets and Scripts --> 
    <link rel="stylesheet" href="resources/css/app.css"> 
    <link rel="stylesheet" href="resources/css/index.css"> </head> 

<body> 
    <!-- navigation bar --> 
    <div class="container-fluid navigation-bar-container text-center" > 
     <div class="navigation-bar"> 
      <div class="row"> 
       <div class="col-md-2"> 
        <div class="navigation-item"> 
         <div class="dropdown"> 
          <button class="dropdown-btn">Home</button> 
          <div class="dropdown-content"> 
                 <a href="#">Login</a> 
          <a href="#">Register</a> 

          <a href="#">Van Boening Sets World Record</a> 

          </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="navigation-item"> 
         <div class="dropdown"> 
          <button class="dropdown-btn">Tour Info</button> 
          <div class="dropdown-content"> <a href="#">How it Works</a> <a href="#">Games Played</a> <a href="#">How to get your room playing</a> <a href="#">Become an event coordinator</a> <a href="#">Mission and Goals</a> </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-4"> 
        <!-- Logo --> 
        <div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="navigation-item"> 
         <div class="dropdown"> 
          <button class="dropdown-btn">Events</button> 
          <div class="dropdown-content"> <a href="#">Schedule</a> <a href="#">Results</a> <a href="#">Locations</a> </div> 
         </div> 
        </div> 
       </div> 
       <div class="col-md-2"> 
        <div class="navigation-item"> 
         <div class="dropdown"> 
          <button class="dropdown-btn">Contact</button> 

         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 

</html>

这是我app.css：

body{ 
    font-family: "Open Sans"; 
} 

.navigation-bar{ 
background-color: black; 
    height: 65px; 
    padding-top: 10px; 


} 

.navigation-bar-container{ 
    padding-left: 0px; 
    padding-right: 0px; 

} 


.navigation-item{ 
    padding-top: 10px; 
} 

.dropdown{ 
    position: relative; 
    display: inline-block 
} 

.dropdown-btn { 
    background-color: transparent; 
    border: none; 
    color:#8CFB76; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #1E392A; 
    min-width: 250px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
    z-index: 1; 
} 

.dropdown-content a { 
    color: #cccccc; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 


.dropdown-content a:hover { 
    background-color: #234331; 
    color: #e6e6e6; 
} 


.dropdown:hover .dropdown-content { 
    display: block; 
}

这是我index.css：

body{ 
background-color: #1a1a1a; 

}

有人可以告诉我如何解决这个问题吗？

编辑：

更改像ZenSystem代码后建议：

来源

2017-04-04 MR.JOIS

您还需要将您的jquery.min.js在bootstrap.min.js之上的脚本。 –

在引导，.row应该是直接子 .container-fluid
上.navigation-bar-container的填充，打破了正常的偏移容器为它的.row

更改为这个..

<div class="container-fluid text-center"> 
     <div class="navigation-bar row"> 
      <div class="col-md-2"> 
        <div class="navigation-item"> 
        ...

http://www.codeply.com/go/NPtXsxCSxX

来源

2017-04-04 14:42:06 ZimSystem

谢谢！但水平滚动仍然存在，我应该减少一些宽度或东西？ –

水平滚动不应该在那里了。这不是在Codeply中。 – ZimSystem

我添加了图片，请查看 –

Bootstrap在右侧的容器流体添加填充

回答

相关问题