bootstrap-horizo​​n删除列之间的空格

Question

我正在做一个带有bootstrap-horizo​​n的动画转盘/滑块，但我似乎无法摆脱列之间的空间。我试过没有天沟css但没有运气。

标记为红色进行测试。

的HTML

<div class="container">
  <div class="row row-horizon">
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
    <div class="col-xs-6">
      <p>This content is very, very, very, very, very, very, very wide!</p>
    </div>
  </div>
</div>

css

.row-horizon{background-color:red;}
.col-xs-6{background-color:white; height:40px;}

结果的 result image

请参阅JSfiddle - https://jsfiddle.net/pbarros/8wfh8o3e/3/

谢谢

Answer 1

.row-horizon内的每个col - * - *类的显示值为＆＃39; inline-block＆＃39;。默认情况下，浏览器会在“内联块”之间添加一些空格。元素，由你的html中的换行符引起。摆脱它的最简单方法是从你的html中删除换行符。

所以而不是：

<div>section 1</div>
<div>section 2</div>
<div>section 3</div>

执行：

<div>section 1</div><div>section 2</div><div>section 3</div>

你的html看起来不太漂亮，但确实解决了这个问题。看看这个小提琴：https://jsfiddle.net/wietsedevries/8wfh8o3e/5/