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

​​

结果 result image

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

谢谢

Answer 1

每一个山坳 - * - *内.row-horizon类有 'inline-block的' 的显示值。默认情况下，浏览器会在'inline-block'元素之间添加一些空格，这是由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/