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/