列表项之间的引导空间答案

【问题标题】：Bootstrap Space between Listing Item列表项之间的引导空间
【发布时间】：2017-05-15 11:28:56
【问题描述】：

在默认使用引导程序的 2 个列表项之间添加边距、填充甚至空格。

尝试过的主题

Space between bootstrap columns

这是附上的图片

<div class="container text-left">
<div class="row">
<div class="col-xs-4 col-sm-12">
                  <!-- Nav tabs -->
                  <ul class="nav nav-justified" id="nav-tabs" role="tablist">
                      <li role="presentation" class="active">
                          <a href="#" aria-controls="" role="tab" data-toggle="tab">
                              <img class="img" src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
                              <span class="quote"><i class="fa fa-quote-left"></i></span>
                          </a>
                      </li>
                      <li role="presentation" class="">
                          <a href="#" aria-controls="" role="tab" data-toggle="tab">
                              <img class="img" src="https://images.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
                              <span class="quote"><i class="fa fa-quote-left"></i></span>
                          </a>
                      </li>

                  </ul>
              </div>

</div>
</div>

【问题讨论】：

贴出你试过的代码。
你真正想做什么
啊，列表项之间的神奇间距。我也一直无法弄清楚这是从哪里来的，所以我决定改用 flex。
@Thomas Yates - 使用 table-cell，flex 无济于事
@SuryaRPraveen 哦，实际上好像我误解了。我说的是魔法填充，它已经在使用 Bootstrap 类的列表项之间。但是你想要填充。我的坏;）

标签： html css twitter-bootstrap

【解决方案1】：

由于您使用的是表格单元格，因此应用 border-spacing: 10px; 或 border-spacing: 10px 0; 应该适合您

.nav-justified {
      border-spacing: 10px 0;
      border-collapse: separate;
}

查看您更新的fiddle

【讨论】：