Bootstrap 3 向网格系统添加装订线 [英] Bootstrap 3 adding gutters to the grid system

查看：30
本文介绍了Bootstrap 3 向网格系统添加装订线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我显然在这里遗漏了一些非常明显的东西，但我希望引导列之间有一个 10 像素的间距.来自默认情况下具有装订线的 ui-kit，要关闭它们，您只需添加 uk-grid-collapse 类.

打开排水沟的 bootstrap 等价物是什么?

http://codepen.io/anon/pen/vKBjBa

<div class="col-lg-4 col-md-4 col-sm-12 col1"><div class="div-content">col 1</div>
<div class="col-lg-4 col-md-4 col-sm-6 col2"><div class="div-content">col 2</div>

<div class="col-lg-4 col-md-4 col-sm-6 col3"><div class="div-content">col 3</div>

解决方案

只需定义内部 div 的颜色即可.在这里，我从父母那里删除了课程并将课程传递给了孩子的 div

<div class="col-lg-4 col-md-4 col-sm-12"><div class="div-content col1">col 1</div>
<div class="col-lg-4 col-md-4 col-sm-6"><div class="div-content col2">col 2</div>

<div class="col-lg-4 col-md-4 col-sm-6"><div class="div-content col3">col 3</div>

因为引导程序在 col- 类中有一个默认的装订线空间，所以使用它们并将 background-color 定义到内部 div 中.

<块引用>

默认的装订线间距是左右两侧 15px，因此您将看到 div 之间的默认间距 30px.如果您想将该空间更改为 10px，只需使用所需空间编写您自己的 css 并覆盖它.

I'm obviously missing something very obvious here but I want a 10px gutter between the bootstrap columns. Coming from ui-kit which has gutters by default, to turn them off you simple add the class uk-grid-collapse.

What is the bootstrap equivalent for turning gutters on?

http://codepen.io/anon/pen/vKBjBa

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col1">
        <div class="div-content">col 1</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col2">
        <div class="div-content">col 2</div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-6 col3">
        <div class="div-content">col 3</div>
    </div>
</div>

解决方案

Just define the colors to inner div. Here i have remove classes from parents and passed the classes to child div's

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-12">
    <div class="div-content col1">col 1</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col2">col 2</div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="div-content col3">col 3</div>
  </div>
</div>

Because bootstrap has a default gutter space in col- classes so use them and define background-color to inner div's.

The default gutter space is 15px from each side left and right so you will see the default space of 30px between the div's. If you want to change that space to 10px just write you own css with desired space and overwrite it.

这篇关于Bootstrap 3 向网格系统添加装订线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆