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是如何運作的，如果你不介意我問？這是相當奇怪考慮到我用它在我的其他網站和它好工作的事實。 –