我的 HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="left-top"><a>Aanmelden</a></div>
<div class="left-bottom"><a>Inloggen</a></div>
</div>
<div class="col-md-6">
<img src="http://placehold.it/350x310" alt="" class="welcome-image"/>
</div>
<div class="col-md-3">
<div class="right-top"></div>
<div class="right-bottom"></div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('[class^=left], [class^=right]').on('click', function () {
$(this).addClass('fullscreen');
});
});
</script>
每当单击按钮时,我希望父方 block 进入全屏, 问题是:
- 使用
width:100%
时,它会占用.col-md-3
的 100% - 当我使用 jQuery 从父类中删除
.col-md-3
类时 整个页面都炸了。
<强> Fiddle
有什么方法可以实现全屏,同时保持其余部分完好无损?
谢谢, g3
最佳答案
Bootply:http://www.bootply.com/DfNnqvTcRL
JS:
$(document).ready(function () {
$('[class^=left], [class^=right]').on('click', function () {
$(this).parent().toggleClass('parent-fullscreen');
$(this).toggleClass('fullscreen');
});
});
CSS:
.parent-fullscreen{
position:absolute;
z-index:2000;
width:100%;
height:100%;
}
.fullscreen {
width: 100%;
height: 100%;
position:absolute;
top:0px;
}
关于jquery - Bootstrap应用真全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30185911/