嘿，我不知道我的代码到底是怎么回事。我不知道边距和填充在哪里，我的轮播和新闻 block 在顶部和两侧都有边距，而下面的 div 没有任何填充或边距..
.affix{
z-index:2000;
top: 0;
width: 100%;
}
.navbar{
vertical-align: middle;
}
.hint
{
color:#FF0000;
}
#box{
//border:1px solid red;
height:440px;
}
#box:hover{
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
color: blue;
}
#mst_visited_product:hover{
box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
#container #image #title
{
border: 0px solid red;
min-height: 100px;
min-width: 400px;
float: left;
}
#container img
{
height:440px;
width: 100%;
min-height: 100%;
background-size: cover;
}
#clear
{
clear : both;
}
#container
{
min-height : 100px;
width : 100%;
margin : 0px;
}
#picture
{
border : 2px solid white;
height : 281px;
width : 281px;
float : left;
margin-left : 35px;
margin-right : 35px;
margin-top : 35px;
}
#container #picture img
{
margin:0px;
z-index: -1;
width: 100%;
height: 100%;
position: relative;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
#picture:hover
{
border: 2px solid blue;
}
#header
{
border: 1px solid red;
height: 200px;
}
a
{
text-decoration: none;
}
#men_collection h2
{
margin : 10px;
}
#women_collection h2
{
margin : 10px;
}
#grooms_collection h2
{
margin : 10px;
}
#brides_collection h2
{
margin : 10px;
}
#men_collection
{
min-width: 50px;
float: left;
//border: 1px solid red;
}
#women_collection
{
float: left;
min-width: 50px;
}
#grooms_collection
{
min-width: 50px;
float: left;
}
#brides_collection
{
min-width: 50px;
float: left;
}
#home
{
float: left;
width: 50px;
}
#home img
{
height : 100%;
width : 50px;
}
#footer
{
border: 1px solid green;
height: 350px;
width: 100%;
background-color: #000000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" Content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="height:150px;">
<form class="navbar-form navbar-right" role="search">
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="Search.." />
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand col-lg-3" href="#">Monaj</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav col-lg-8">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"> Home</span></a></li>
<li><a href="sub_category.php?id=1">Men Collection</a></li>
<li><a href="sub_category.php?id=2">Women Collection</a></li>
<li><a href="sub_category.php?id=3">Grooms Collection</a></li>
<li><a href="sub_category.php?id=4">Brides Collection</a></li>
</ul>
<ul class="nav navbar-nav col-lg-1 navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"> Login</span></a></li>
</ul>
</div>
</nav>
<div id="main">
<div class="container-fluid col-lg-9 col-sm-9" style="min-height:100px">
<div id="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="products_images/147.jpg" alt="Pashmina">
</div>
<div class="item">
<img src="products_images/219.jpg" alt="Woolen">
</div>
<div class="item">
<img src="products_images/432.jpg" alt="Silk">
</div>
<div class="item">
<img src="products_images/343.jpg" alt="Shawl">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="col-lg-3" >
<div class="col-lg-12" id="box"></div>
</div>
<div class="col-lg-12 mst"><p style="text-align:center; text-shadow:4px; font-size:39px; background:grey; margin:0; padding:0;"><strong>Most Visited Products</strong></p></div>
</div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="mst_visited_product" style="height:300px;" class="col-lg-3"></div>
<div id="footer" class="col-lg-12" style="height:300px;color:black;"></div>
</body>
</html>**
强文本
**
最佳答案
这是因为当您使用 col 类名称(如 col-lg、col-sm 等)时，bootstrap 会应用它自己的填充和边距样式
我确信您可以通过应用另一个具有覆盖样式的类来手动覆盖您想要的任何填充或边距，可能不必使用 !important。
我发现这是一种用于列技术的 kill-all padding:
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
例如，如果您不想在所有列中填充，现在只需添加 .no-gutter 类。希望这可以帮助。
关于html - 我无法从 bootstrap 的列和行中删除边距或填充，因为它看起来不错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43216054/