删除空白引导程序 [英] Removing white space bootstrap

查看：25
本文介绍了删除空白引导程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试删除瓷砖之间的空白区域，如下图所示:

这是我目前拥有的:

这是我目前所拥有的第二张图片的标记:

CSS

 .mainbody-section {填充顶部:30px；填充底部:30px；}/* 覆盖文本 */.模块 {背景颜色:浅灰色；背景附件:固定；/*宽度:400像素；*/高度:300px；位置:相对；溢出:隐藏；边距:20px；}.module >标题{位置:绝对；底部:0；左:0；宽度:100%；填充:20px 10px；背景:继承；背景附件:固定；溢出:隐藏；}.module >标题::之前{内容: "";位置:绝对；顶部:-20px；左:0；宽度:200%；高度:200%；背景:继承；背景附件:固定；-webkit-过滤器:模糊(4px)；过滤器:模糊(4px)；}.module >标题::之后{内容: "";位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；背景:rgba(0, 0, 0, 0.25);}.module >标题 >h1{边距:0；白颜色;位置:相对；z-索引:1；}.module >标题 >h2{边距:0；白颜色;位置:相对；z-索引:1；}* {box-sizing: 边框框；}

HTML

<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right"><div class="module"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

有人可以建议我删除瓷砖之间的所有空白吗?

谢谢

解决方案 

 .mainbody-section {填充顶部:30px；填充底部:30px；}.newClass{背景颜色:浅灰色；填充:0px！重要；边距:0px！重要；}.红色的{背景颜色:红色！重要；}/* 覆盖文本 */.模块 {背景色:#abc;背景附件:固定；/*宽度:400像素；*/高度:300px；位置:相对；溢出:隐藏；}.module >标题{位置:绝对；底部:0；左:0；宽度:100%；填充:20px 10px；背景:继承；背景附件:固定；溢出:隐藏；}.module >标题::之前{内容: "";位置:绝对；顶部:-20px；左:0；宽度:200%；高度:200%；背景:继承；背景附件:固定；-webkit-过滤器:模糊(4px)；过滤器:模糊(4px)；}.module >标题::之后{内容: "";位置:绝对；顶部:0；左:0；宽度:100%；高度:100%；背景:rgba(0, 0, 0, 0.25);}.module >标题 >h1{边距:0；白颜色;位置:相对；z-索引:1；}.module >标题 >h2{边距:0；白颜色;位置:相对；z-索引:1；}* {box-sizing: 边框框；}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"><div class="row"><div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module red"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"><div class="module"><标题><h1 style="font-size: 20px; text-align: center;">Test<h2 style="font-size: 13px; text-align: center;">这是一些子文本</标题>

http://jsfiddle.net/qbo8pk8j/3/

I am trying to remove the white space that is between my tiles like the picture below:

This is what I currently have :

Here is the mark up for the second picture which is currently what I have in place :

CSS

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

        /* Overlay text */
    .module {
        background-color: lightgray;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
        margin: 20px;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

HTML

<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

Can someone please advice me on a way to remove all the white space between the tiles?

Thanks

解决方案 

 .mainbody-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
.newClass{
        background-color: lightgray;
        padding: 0px!important;
        margin:0px!important;
}
.red{
    background-color: red!important;
}
        /* Overlay text */
    .module {
        background-color: #abc;
        background-attachment: fixed;
        /*width: 400px;*/
        height: 300px;
        position: relative;
        overflow: hidden;
    }

        .module > header {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px 10px;
            background: inherit;
            background-attachment: fixed;
            overflow: hidden;
        }

            .module > header::before {
                content: "";
                position: absolute;
                top: -20px;
                left: 0;
                width: 200%;
                height: 200%;
                background: inherit;
                background-attachment: fixed;
                -webkit-filter: blur(4px);
                filter: blur(4px);
            }

            .module > header::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.25);
            }

            .module > header > h1 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

            .module > header > h2 {
                margin: 0;
                color: white;
                position: relative;
                z-index: 1;
            }

    * {
        box-sizing: border-box;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
        <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module red">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
    <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass">
         <div class="module">
            <header>
                <h1 style="font-size: 20px; text-align: center;">Test
                </h1>
                <h2 style="font-size: 13px; text-align: center;"> This is some sub-text

                </h2>                   
            </header>                  
        </div>
    </div>
</div>

http://jsfiddle.net/qbo8pk8j/3/

这篇关于删除空白引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

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