Question

我很确定该问题有一些简单的解决方法，但是除了覆盖引导程序的默认行为（对我来说这不是一个好主意）之外，我找不到其他解决方法。

问题很简单。当我有这个时：

#main {
  margin-top: 100px;
  width: 100px;
  background-color: black;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div id="main" class="col-lg-12 col-md-12 col-sm-12">
    
    </div>
  </div>  
</div>

即使没有内容，您也可以在屏幕上看到黑色条纹。

经过一些检查/调查后，我了解到引导程序具有以下默认样式：

//防止列为空时塌陷

最小高度：1像素；

我已经阅读了这个Bootstrap min height问题和有关该主题的其他几篇文章，因此似乎打算采用这种样式。

但是，我想这并不少见，我有一个具有搜索功能的页面，当用户执行搜索并选择任何结果时，报告应显示在search下，但直到发生这种情况时，我有几个条纹，应该在某个位置显示内容，但我希望它们不可见。

我可以想到一些JS的解决方法，但是想知道是否可以使用纯CSS来做到这一点？我总是可以将min-height的默认值改写为0，但我想引导人员有充分的理由添加此值，并且也许有一种已知的方法可以避免在没有可用内容时显示带有背景色的条纹。 / p>

Answer 1

如果您不喜欢覆盖自举程序样式，则可以使用:empty选择器删除background

#main {
  margin-top: 100px;
  width: 100px;
  background-color: black;
}

#main:empty {
  background: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div id="main" class="col-lg-12 col-md-12 col-sm-12"></div>
  </div>
</div>

Answer 2

想法是将其隐藏在较小的% <<.\Filename.png>> # with and without "" or '' % <<..\Filename.png>> # with and without "" or '' % <<..\..\Filename.png>> # with and without "" or ''中，但是您需要注意透明度：

box-shadow

.main {
  margin-top: 100px;
  width: 100px;
  box-shadow:0 1px 0 inset #fff;
  background-color: black;
}

另一个想法是依靠渐变作为背景，您可以稍微调整位置：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="main col-lg-12 col-md-12 col-sm-12">
    
    </div>
  </div>  
</div>

.main {
  margin-top: 100px;
  width: 100px;
  background: linear-gradient(black,black) 0 1px no-repeat;
}

您还可以添加透明的<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="main col-lg-12 col-md-12 col-sm-12"> </div> </div> </div>并调整border-top

background-clip

.main {
  margin-top: 100px;
  width: 100px;
  border-top:1px solid transparent;
  background:black;
  background-clip:padding-box;
}

Answer 3

引导程序默认设置为min-height：1px;在他的列上，因此您必须设置min-height：0px;为了避免这种情况。

在Bootstrap Col类的div内部可以看到background-color

3 个答案: