bootstrap-horizo​​nカラム間のスペースを削除する

Question

私はブートストラップ・ホライズンでアニメーションカルーセル/スライダをやっていますが、カラム間のスペースを取り除くことはできません。私は無駄な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

すべてCOLをありがとう - * - * .row-horizon内部クラスは 'インラインブロック' の表示値を持っています。デフォルトでは、ブラウザはHTMLの改行によって引き起こされる 'inline-block'要素の間にスペースを追加します。それを取り除く最も簡単な方法は、あなたの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/