如何减少两个引导行之间的垂直空间/边距？答案

【问题标题】：How do i reduce the vertical space/margin between two bootstrap rows?如何减少两个引导行之间的垂直空间/边距？
【发布时间】：2015-12-11 06:01:28
【问题描述】：

下面是我的代码，我希望“portfolio1Info”div 元素行与“portfolioSite”div 元素行垂直相邻，没有空格/边距。我试过 .noBottomMargin{margin-bottom:0px !important;}、.noTopMargin{margin-top:0px !important}。它似乎不起作用，我总是在图像和图像行之后的行之间出现间隙

    <div id="portfolio1" class="col-lg-4" style="border:solid">
      <div class="row">
        <div class="col-lg-12">
        <a href="www.placekitten.com" target="_blank"><img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" /></a>
        </div>
        </div>
      <div id="portfolio1Info" class="row">
        <div class="col-lg-12">
          <div style="background-color:#000000">
          <h5 align="center"> Please hold 1? </h5>
          <h6 align="center"><i> HTML? </i></h6>
          </div>
        </div>
      </div>
    </div>

【问题讨论】：

你能提供一个小提琴伴侣吗？
能否请您创建一个（JSFiddle 演示）[jsfiddle.net/]?
你能告诉我们portfolioSite元素在哪里吗？

标签： html css twitter-bootstrap

【解决方案1】：

#portfolio1Info h6 {
  margin-bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="portfolio1" class="col-lg-4" style="border:solid">
  <div class="row">
    <div class="col-lg-12">
      <a href="www.placekitten.com" target="_blank">
        <img class="img-responsive" src="http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwww.placekitten.com?" border="1" />
      </a>
    </div>
  </div>
  <div id="portfolio1Info" class="row">
    <div class="col-lg-12">
      <div style="background-color:#000000">
        <h5 align="center"> Please hold 1? </h5>
        <h6 align="center"><i> HTML? </i></h6>
      </div>
    </div>
  </div>
</div>

如果您想将该页脚粘贴在底部，则删除由于H6 标签而出现的空间，默认情况下，您的h6 有一些边距。

【讨论】：

很高兴，它有帮助..！如果有效，您可以将其标记为答案或投赞成票

【解决方案2】：

试试这个代码

         <style type="text/css">
            #portfolio1Info h5 ,#portfolio1Info h6 {
                margin-top: 0 !important;
            }
        </style>

效果很好

【讨论】：

【解决方案3】：

不是.row，而是第二行的<h5>。它的 margin-top 为 10 像素。

【讨论】：