Bootstrap如何在不破坏布局的情况下减少列之间的填充空间

Question

我们总是在bootstrap中获得默认填充，我想减少它而不是完全删除它，但不会破坏布局和响应性。 在这段代码中，我想减少两列之间的空间。

<div class="row">
    <div class="col-lg-6 image">
        <div>Some content</div>
    </div>
    <div class="col-lg-5 content">
        <div>Some Content</div>
    </div>
</div>

Answer 1

在div中添加一个类，将填充设置为您想要的百分比。使用百分比将使其保持响应。

CSS

.setpad {
  padding: the-percentage; 
}

HTML

<div class="row">
    <div class="col-lg-6 image set setpad">
        <div>Some content</div>
    </div>
    <div class="col-lg-5 content setpad">
        <div>Some Content</div>
    </div>
</div>

Answer 2

直接来自Bootstrap。 http://getbootstrap.com/css/#grid

  

  
• 列通过填充创建装订线（列内容之间的间隙）。
  

.col-lg-1, ... {  
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

如果您不想创建可减少填充的自定义类，则可以在.image类上设置填充。这是您的评论http://jsfiddle.net/yongchuc/m4favurs/

的小提琴示例