0
我试图做一个引导navbar与4 col-sm-3在row在container-fluid父项：引导行超出集装箱，液体
出于某种原因，有这种偏移在行超过容器宽度，如图像的顶部所示。你们有没有人知道如何纠正这种情况，使网站仍然保持响应？下面是我的参考和HTMLLess：
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Morocco</title>
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">
<script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script type = "text/javascript" src = "js/jquery.js"></script>
<script type = "text/javascript" src = "js/bootstrap.js"></script>
<script type = "text/javascript" src = "js/app.js"></script>
</head>
<body style = "background: #efefef">
<!-- Navigation Bar -->
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<div class = "navbar-header">
<button data-toggle = "collapse" data-target = "#nav-collapse"
class = "navbar-toggle">
<span style = 'background-color: white' class = 'icon-bar'></span>
<span style = 'background-color: white' class = 'icon-bar'></span>
<span style = 'background-color: white' class = 'icon-bar'></span>
</button>
</div>
<div id = "nav-collapse" class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li><a href = "index.html">Home</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "itinerary.html">Itinerary</a></li>
<li><a href = "trip.html">Upcoming Trip</a></li>
<li><a href = "service.html">Community Service</a></li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid">
<div class = "row">
<div class = "block col-sm-3" style = "background: #2980b9">Filler</div>
<div class = "block col-sm-3" style = "background: #298bba">Filler</div>
<div class = "block col-sm-3" style = "background: #2996ba">Filler</div>
<div class = "block col-sm-3" style = "background: #29a1ba">Filler</div>
</div>
</div>
</body>
@import "variables.less";
@font-face
{
font-family: Montserrat;
src: url("../fonts/Montserrat.woff2");
}
@font-face
{
font-family: Avenir;
src: url("../fonts/Avenir.woff");
}
@font-face
{
font-family: Proxima;
src: url("../fonts/Proxima.otf");
}
@font-face
{
font-family: Euclid;
src: url("../fonts/Euclid.otf");
}
@font-face
{
font-family: Besom;
src: url("../fonts/Besom.ttf");
}
html, body
{
width: 100%;
height: 100%;
margin: 0px auto;
padding: 0px;
}
.container-fluid, .collapse
{
margin: 0px auto;
padding: 0px;
}
.navbar
{
text-align: center;
font-family: Euclid;
font-size: 14px;
letter-spacing: 3px;
margin: 0px auto;
padding: 0px;
}
.block
{
text-align: center;
font-family: Proxima;
font-size: 12pt;
letter-spacing: 2px;
padding: 20px 10px;
color: white;
margin: 0px auto;
}
此规则的问题是：'.container流体，.collapse {余量：0px auto的; padding：0px; }'。从中删除'容器流体'类。 – vanburen
@vanburen是如何运作的，如果你不介意我问？这是相当奇怪考虑到我用它在我的其他网站和它好工作的事实。 –