twitter-bootstrap – 使用Bootstrap在Modal View中看不到某些DIV

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 使用Bootstrap在Modal View中看不到某些DIV，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我在模态视图中显示“n”div(带有渐变背景)时遇到问题.问题是并非所有“n”div都能正确显示.

JSFiddle – here

更新 – 问题似乎只发生在Chrome上

测试 – 代码

CSS

.mypoint{
    cursor: pointer;
    height: 200px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin: 5px;
}

.mypoint2{
    padding: 0;
    margin: 0;
}

.gradient1{
    background: -webkit-gradient(linear,center top,center bottom,from(#ff5e3a),to(#ff2a68));
    background: -webkit-linear-gradient(#ff5e3a,#ff2a68);
    background: -moz-linear-gradient(#ff5e3a,#ff2a68);
    background: -o-linear-gradient(#ff5e3a,#ff2a68);
    background: -ms-linear-gradient(#ff5e3a,#ff2a68);
    background: linear-gradient(#ff5e3a,#ff2a68);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5e3a',endColorstr='#ff2a68',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient2{
    background: -webkit-gradient(linear,from(#ff9500),to(#ff5e3a));
    background: -webkit-linear-gradient(#ff9500,#ff5e3a);
    background: -moz-linear-gradient(#ff9500,#ff5e3a);
    background: -o-linear-gradient(#ff9500,#ff5e3a);
    background: -ms-linear-gradient(#ff9500,#ff5e3a);
    background: linear-gradient(#ff9500,#ff5e3a);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9500',endColorstr='#ff5e3a',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient3{
    background: -webkit-gradient(linear,from(#ffdb4c),to(#ffcd02));
    background: -webkit-linear-gradient(#ffdb4c,#ffcd02);
    background: -moz-linear-gradient(#ffdb4c,#ffcd02);
    background: -o-linear-gradient(#ffdb4c,#ffcd02);
    background: -ms-linear-gradient(#ffdb4c,#ffcd02);
    background: linear-gradient(#ffdb4c,#ffcd02);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdb4c',endColorstr='#ffcd02',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient4{
    background: -webkit-gradient(linear,from(#87fc70),to(#0bd318));
    background: -webkit-linear-gradient(#87fc70,#0bd318);
    background: -moz-linear-gradient(#87fc70,#0bd318);
    background: -o-linear-gradient(#87fc70,#0bd318);
    background: -ms-linear-gradient(#87fc70,#0bd318);
    background: linear-gradient(#87fc70,#0bd318);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87fc70',endColorstr='#0bd318',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient5{
    background: -webkit-gradient(linear,from(#52edc7),to(#5ac8fb));
    background: -webkit-linear-gradient(#52edc7,#5ac8fb);
    background: -moz-linear-gradient(#52edc7,#5ac8fb);
    background: -o-linear-gradient(#52edc7,#5ac8fb);
    background: -ms-linear-gradient(#52edc7,#5ac8fb);
    background: linear-gradient(#52edc7,#5ac8fb);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52edc7',endColorstr='#5ac8fb',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient6{
    background: -webkit-gradient(linear,from(#1ad6fd),to(#1d62f0));
    background: -webkit-linear-gradient(#1ad6fd,#1d62f0);
    background: -moz-linear-gradient(#1ad6fd,#1d62f0);
    background: -o-linear-gradient(#1ad6fd,#1d62f0);
    background: -ms-linear-gradient(#1ad6fd,#1d62f0);
    background: linear-gradient(#1ad6fd,#1d62f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ad6fd',endColorstr='#1d62f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient7{
    background: -webkit-gradient(linear,from(#c644fc),to(#5856d6));
    background: -webkit-linear-gradient(#c644fc,#5856d6);
    background: -moz-linear-gradient(#c644fc,#5856d6);
    background: -o-linear-gradient(#c644fc,#5856d6);
    background: -ms-linear-gradient(#c644fc,#5856d6);
    background: linear-gradient(#c644fc,#5856d6);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c644fc',endColorstr='#5856d6',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient8{
    background: -webkit-gradient(linear,from(#ef4db6),to(#c643fc));
    background: -webkit-linear-gradient(#ef4db6,#c643fc);
    background: -moz-linear-gradient(#ef4db6,#c643fc);
    background: -o-linear-gradient(#ef4db6,#c643fc);
    background: -ms-linear-gradient(#ef4db6,#c643fc);
    background: linear-gradient(#ef4db6,#c643fc);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef4db6',endColorstr='#c643fc',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient9{
    background: -webkit-gradient(linear,from(#4a4a4a),to(#2b2b2b));
    background: -webkit-linear-gradient(#4a4a4a,#2b2b2b);
    background: -moz-linear-gradient(#4a4a4a,#2b2b2b);
    background: -o-linear-gradient(#4a4a4a,#2b2b2b);
    background: -ms-linear-gradient(#4a4a4a,#2b2b2b);
    background: linear-gradient(#4a4a4a,#2b2b2b);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4a4a4a',endColorstr='#2b2b2b',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient10{
    background: -webkit-gradient(linear,from(#dbddde),to(#898c90));
    background: -webkit-linear-gradient(#dbddde,#898c90);
    background: -moz-linear-gradient(#dbddde,#898c90);
    background: -o-linear-gradient(#dbddde,#898c90);
    background: -ms-linear-gradient(#dbddde,#898c90);
    background: linear-gradient(#dbddde,#898c90);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbddde',endColorstr='#898c90',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient11{
    background-color: #ff3b30;

}
.gradient12{
    background-color: #ff9500;

}
.gradient13{
    background-color: #ffcc00;

}
.gradient14{
    background-color: #4cd964;

}
.gradient15{
    background-color: #34aadc;

}
.gradient16{
    background-color: #007aff;

}
.gradient17{
    background-color: #5856d6;

}
.gradient18{
    background-color: #ff2d55;

}
.gradient19{
    background-color: #8e8e93;

}
.gradient20{
    background-color: #c7c7cc;

}
.gradient21{
    background: -webkit-gradient(linear,from(#5ad427),to(#a4e786));
    background: -webkit-linear-gradient(#5ad427,#a4e786);
    background: -moz-linear-gradient(#5ad427,#a4e786);
    background: -o-linear-gradient(#5ad427,#a4e786);
    background: -ms-linear-gradient(#5ad427,#a4e786);
    background: linear-gradient(#5ad427,#a4e786);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ad427',endColorstr='#a4e786',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;


}
.gradient22{
    background: -webkit-gradient(linear,from(#c86edf),to(#e4b7f0));
    background: -webkit-linear-gradient(#c86edf,#e4b7f0);
    background: -moz-linear-gradient(#c86edf,#e4b7f0);
    background: -o-linear-gradient(#c86edf,#e4b7f0);
    background: -ms-linear-gradient(#c86edf,#e4b7f0);
    background: linear-gradient(#c86edf,#e4b7f0);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c86edf',endColorstr='#e4b7f0',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient23{
    background-color: #D1EEFC;

}
.gradient24{
    background-color: #E0F8D8;

}
.gradient25{
    background: -webkit-gradient(linear,from(#fb2b69),to(#ff5b37));
    background: -webkit-linear-gradient(#fb2b69,#ff5b37);
    background: -moz-linear-gradient(#fb2b69,#ff5b37);
    background: -o-linear-gradient(#fb2b69,#ff5b37);
    background: -ms-linear-gradient(#fb2b69,#ff5b37);
    background: linear-gradient(#fb2b69,#ff5b37);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb2b69',endColorstr='#ff5b37',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient26{
    background: -webkit-gradient(linear,from(#f7f7f7),to(#d7d7d7));
    background: -webkit-linear-gradient(#f7f7f7,#d7d7d7);
    background: -moz-linear-gradient(#f7f7f7,#d7d7d7);
    background: -o-linear-gradient(#f7f7f7,#d7d7d7);
    background: -ms-linear-gradient(#f7f7f7,#d7d7d7);
    background: linear-gradient(#f7f7f7,#d7d7d7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7',endColorstr='#d7d7d7',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient27{
    background: -webkit-gradient(linear,from(#1d77ef),to(#81f3fd));
    background: -webkit-linear-gradient(#1d77ef,#81f3fd);
    background: -moz-linear-gradient(#1d77ef,#81f3fd);
    background: -o-linear-gradient(#1d77ef,#81f3fd);
    background: -ms-linear-gradient(#1d77ef,#81f3fd);
    background: linear-gradient(#1d77ef,#81f3fd);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d77ef',endColorstr='#81f3fd',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient28{
    background: -webkit-gradient(linear,from(#d6cec3),to(#e4ddca));
    background: -webkit-linear-gradient(#d6cec3,#e4ddca);
    background: -moz-linear-gradient(#d6cec3,#e4ddca);
    background: -o-linear-gradient(#d6cec3,#e4ddca);
    background: -ms-linear-gradient(#d6cec3,#e4ddca);
    background: linear-gradient(#d6cec3,#e4ddca);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6cec3',endColorstr='#e4ddca',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient29{
    background: -webkit-gradient(linear,from(#55efcb),to(#5bcaff));
    background: -webkit-linear-gradient(#55efcb,#5bcaff);
    background: -moz-linear-gradient(#55efcb,#5bcaff);
    background: -o-linear-gradient(#55efcb,#5bcaff);
    background: -ms-linear-gradient(#55efcb,#5bcaff);
    background: linear-gradient(#55efcb,#5bcaff);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55efcb',endColorstr='#5bcaff',GradientType=0 );
    background-attachment: fixed;
    background-repeat: no-repeat;

}
.gradient30{
    background-color: #FF4981;

}
.gradient31{
    background-color: #FFD3E0;

}
.gradient32{
    background-color: #F7F7F7;

}
.gradient33{
    background-color: #FF1300;

}
.gradient34{
    background-color: #1F1F21;

}
.gradient35{
    background-color: #BDBEC2;

}
.gradient36{
    background-color: #FF3A2D;

}

HTML

<!-- theme modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content" style="background-color: transparent;background-image:url('images/blur_08.png');background-repeat: repeat;"> <!-- 0.8 -->

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel" style="color: black;">Seleziona Tema</h4>
        </div>

        <div class="modal-body">

            <div class="row">

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient1 mypoint" onclick="SET_THEME(1,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient2 mypoint" onclick="SET_THEME(2,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient3 mypoint" onclick="SET_THEME(3,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient4 mypoint" onclick="SET_THEME(4,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient5 mypoint" onclick="SET_THEME(5,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient6 mypoint" onclick="SET_THEME(6,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient7 mypoint" onclick="SET_THEME(7,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient8 mypoint" onclick="SET_THEME(8,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient9 mypoint" onclick="SET_THEME(9,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient10 mypoint" onclick="SET_THEME(10,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient11 mypoint" onclick="SET_THEME(11,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient12 mypoint" onclick="SET_THEME(12,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient13 mypoint" onclick="SET_THEME(13,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient14 mypoint" onclick="SET_THEME(14,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient15 mypoint" onclick="SET_THEME(15,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient16 mypoint" onclick="SET_THEME(16,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient17 mypoint" onclick="SET_THEME(17,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient18 mypoint" onclick="SET_THEME(18,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient19 mypoint" onclick="SET_THEME(19,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient20 mypoint" onclick="SET_THEME(20,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient21 mypoint" onclick="SET_THEME(21,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient22 mypoint" onclick="SET_THEME(22,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient25 mypoint" onclick="SET_THEME(25,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient27 mypoint" onclick="SET_THEME(27,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient28 mypoint" onclick="SET_THEME(28,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient29 mypoint" onclick="SET_THEME(29,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient30 mypoint" onclick="SET_THEME(30,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient31 mypoint" onclick="SET_THEME(31,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient33 mypoint" onclick="SET_THEME(33,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient34 mypoint" onclick="SET_THEME(34,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient35 mypoint" onclick="SET_THEME(35,<?PHP echo $_SESSION['ID'];?>);"></div></div>

                <div class="col-6 col-sm-6 col-lg-4 mypoint2"><div class="gradient36 mypoint" onclick="SET_THEME(36,<?PHP echo $_SESSION['ID'];?>);"></div></div>

            </div>

        </div>

        <div class="modal-footer">
           <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
        </div>


    </div>
  </div>
</div>



<li><a style="color: red;" class="" href="#" data-toggle="modal" data-target=".bs-example-modal-lg"><span class="glyphicon glyphicon-picture" style="margin-right: 5px;"></span>TEMA</a></li>

解决方法

这是Chrome中已知的错误之一.您可以通过以下描述的许多不同方式修复它： Fixed attachment background image flicker/disappear in chrome when coupled with a css transform.我建议将此行添加到.gradientXX类中,因为它对我有用： 
-webkit-transform: translate3d(0,0);

如果它不起作用,请尝试上面链接中的其他解决方法.

在Chrome 36中,这个错误已经解决,但我仍然在Opera 21(使用Chromium engnie)中看到它.另外,Opera中还有其他一些不相关的错误,所以请在javascript控制台中查看.

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
顶求网首页整体设计思路
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
BootStrap中Affix控件的使用方法及如何保持布局的美观
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
针对BootStrap中tabs控件的美化和完善
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
移动开发中单页异步加载所有列表项
在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
仿豆瓣分类标签的实现
为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作