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

Question

我正在使用 bootstrap-horizo​​n 制作动画旋转木马/ slider ，但我似乎无法摆脱列之间的空间。我尝试了 no gutter 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-horizo​​n 中的每个 col-*-* 类都有一个显示值“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 看起来不漂亮，但它确实解决了问题。看看这个 fiddle :https://jsfiddle.net/wietsedevries/8wfh8o3e/5/