Question

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

如图所示，导航栏结束后就会出现间隙。

这是我的 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建议的代码后：

Answer 1

在Bootstrap中，.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

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

1 个答案: