Bootstrap Layout会创建奇怪的填充和对齐
我正在开发我的第一个Bootstrap布局并且到目前为止很享受它，尽管我遇到了一些问题，它似乎在创建意外的填充和对齐问题。
我希望将其水平放置为Nav Bar，Search Bar，Content，Footer。它们应该都是页面的全宽，但所有内容都保留在中间并对齐。出于某种原因，我的导航栏/页脚两侧都有奇怪的空格，内容对齐往往是锯齿状的。
任何人都可以帮我弄清楚造成这些问题的原因吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="row search-bar">
<div class="container">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
</body>
</html>
5 个答案:
答案 0 :(得分：1)
您尚未正确构建HTML。总是经验法则是您的所有列必须位于容器内的行和行内。您可以将其想象为
container > row > columns
此外，我在最后一个按钮上添加了btn-block，因此它展开了一点。另一件事是你在HTML中使用了多个容器。通常，经验法则是在页面中使用一个容器。但是在您的情况下，因为您有一个菜单遍布页面并且正文居中，您将需要2个容器。一般样板文件如下：
container
row // each row is 12 columns. so add the combination
col 4
col 8
row
col 3
col 3 // you can further divide each columns into a row
row // again divided into 12 columns
col 6
col 6
col 3
col 3
容器：包装所有内容并将其内容集中在内
容器流体：包裹所有内容但让它流动
行：用于定义列的容器。 Bootstrap使用12列网格
列：每列
Bootstrap网站对网格的工作方式有很好的 example 。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
</ul>
</div>
</nav>
</div>
<!-- Search Bar -->
<div class="container">
<div class="row search-bar" style="margin-bottom: 10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
<div class="row">
<div class="content col-lg-12">
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</body>
</html>
答案 1 :(得分：0)
列通过填充创建装订线（列内容之间的间隙）。该填充在第一列和最后一列的行中通过.rows
上的负余量进行偏移
答案 2 :(得分：0)
由于引导结构不正确，您的填充和对齐问题已经解决了。请参阅此处的代码CODEPEN
<div class="container-fluid">
<!-- Navigation Bar -->
<!--<nav class="navbar navbar-inverse navbar-fixed-top">-->
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website</a>
</div>
<!-- Right Contents -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Register</a></li>
</ul>
</div>
</nav>
<!-- Search Bar -->
<div class="container ">
<div class="row search-bar" style="margin-bottom:10px;">
<!-- Search Text Box -->
<div class="col-lg-5">
<input class="form-control" id="search" type="text" value="Search stuff...">
</div>
<!-- Search Category -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Category <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Location -->
<div class="col-lg-3">
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle col-xs-12" data-toggle="dropdown">Select Location <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
<li><a href="#">Test 3</a></li>
</ul>
</div>
</div>
<!-- Search Button -->
<div class="col-lg-1">
<button class="btn btn-default btn-block" type="button"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="content col-lg-12">
<div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
<div class="col-sm-3">
<div style="height:125px;width:100%;border:1px black solid;">Category</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Site footer -->
<footer class="footer">
<div class="container">
<p>© Company 2016</p>
</div>
</footer>
</div>
答案 3 :(得分：0)
CSS
.no-margin{
margin: 0px;
}
.no-padding
{
padding: 0px;
}
<强> HTML
<div class="panel-group" no-margin no-padding>
<div class="panel-primary" style="box-shadow:0px 20px 20px 0px">
<div class="panel-body">
任何DIV类中的任何一个
<nav class="navbar navbar-background navbar-info no-margin no-padding" >
<div class="navbar-header ">
<ul class="nav navbar-nav">
答案 4 :(得分：0)
因为总是存在，所以已经有一个Bootstrap调整类用于该常见问题。 排水沟或无排水沟
.no-gutters {
margin-right: 0;
margin-left: 0;
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？