Bootstrap 3:缺少排水沟 [英] Bootstrap 3: Missing gutters

查看：21
本文介绍了Bootstrap 3:缺少排水沟的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

刚开始使用 bootstrap 3，我无法在列之间设置间距.

我创建了最基本的代码来测试:

<html lang="zh-cn"><头><title>测试</title><script src="http://code.jquery.com/jquery.js"></script><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen"/><风格>.box1 {背景颜色:绿色；}.box2 {背景颜色:蓝色；}</风格><div class="容器"><div class="row"><div class="col-lg-4 box1"><h1>测试</h1>

<div class="col-lg-8 box2"><h1>测试2</h1>

结果只是一个大的绿色/蓝色框，两列之间没有任何排水沟.我也在小提琴上尝试过，但没有运气http://jsfiddle.net/Tgkkb/我错过了什么?

解决方案

Bootstrap 3 改用 padding 代替 margin 用于装订线.所以，内容是分开的，但盒子不是.background-color 也将填充 padding.

不过，您应该能够通过设置内框的背景来获得所需的效果:

<div class="col-sm-4"><div class="box1"><h1>测试</h1>

<div class="col-sm-8"><div class="box2"><h1>测试2</h1>

http://jsfiddle.net/PFxUk/

<小时>

尽管如此，我们的目标只是将 background 应用于单个包装子.所以，如果标题肯定不会有任何兄弟姐妹，那么你可以放弃额外的

s:

<div class="col-sm-4"><h1 class="box1">测试</h1>
<div class="col-sm-8"><h1 class="box2">Test2</h1>

http://jsfiddle.net/G2gbG/

Just started playing around with bootstrap 3 and I can't get gutters between columns to work.

I created the most basic code to test with:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js">                                                                                                                                  </script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <style>
        .box1 {
            background-color: green;
        }
        .box2 {
            background-color: blue;
        }
    </style>
</head>
<div class="container">
    <div class="row">
        <div class="col-lg-4 box1">
            <h1>Test</h1>
        </div>
        <div class="col-lg-8 box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>
</html>

And the result is just one big green/blue box without any gutter in between the two columns. I have also tried it on a fiddle with no luck http://jsfiddle.net/Tgkkb/ What am I missing?

解决方案

Bootstrap 3 switched to using padding for the gutters rather than margins. So, the content is parted, but the boxes aren't. And a background-color will fill the padding as well.

Though, you should be able to get the desired effect by setting the background on inner boxes:

<div class="row">
    <div class="col-sm-4">
        <div class="box1">
            <h1>Test</h1>
        </div>
    </div>
    <div class="col-sm-8">
        <div class="box2">
            <h1>Test2</h1>
        </div>
    </div>
</div>

http://jsfiddle.net/PFxUk/

Though, the goal is just to apply the background to a single, wrapping child. So, if the headers definitely won't have any siblings, then you can possibly forgo the additional <div>s:

<div class="row">
    <div class="col-sm-4">
        <h1 class="box1">Test</h1>
    </div>
    <div class="col-sm-8">
        <h1 class="box2">Test2</h1>
    </div>
</div>

http://jsfiddle.net/G2gbG/

这篇关于Bootstrap 3:缺少排水沟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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