- 首页
- 前端开发
- 是否可以在超大 div 的引导列中设置背景?
是否可以在超大 div 的引导列中设置背景?
[英] Is it possible to set a background in a bootstrap column that oversizes the div?
本文介绍了是否可以在超大 div 的引导列中设置背景?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我需要编写下一个示例代码:
我正在使用引导程序对所有网站进行编码,这部分的代码是这样的:
`<div class="容器"><!-- 列的示例行--><div class="row"><div class="col-md-6"><div id="login-form-box" class="form-box"><div id="login-form-info" class="form-info"><?php if (isset($content['info']) && !empty($content['info'])) {回声 $content['info'];}?>
<?php if (isset($error_message)) {echo '<div id="login-form-info" class="form-error">'.$error_message.'</div>';}?><form id="login-form" class="form" action="<?php echo api_get_path(WEB_PATH)?>index.php" method="post"><div><label for="login"><?php echo custompages_get_lang('User');?></label><input name="login" type="text"/><br/><label for="password"><?php echo custompages_get_lang('Password');?></label><input name="password" type="password"/><br/>
</表单><div id="login-form-submit" class="form-submit" onclick="document.forms['login-form'].submit();"><span><?php echo custompages_get_lang('LoginEnter');?></span>
<!-- #form-submit --><div id="链接"><?php if (api_get_setting('allow_registration') === 'true') { ?><a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/inscription.php?language=<?php echo api_get_interface_language(); ?>"><?php echo custompages_get_lang('注册')?></a><br/><?php } ?><a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/lostPassword.php?language=<?php echo api_get_interface_language(); ?>"><?php echo custompages_get_lang('LostPassword')?></a>
<div class="col-md-6"><!-- <img class="img" src="<?php echo api_get_path(WEB_PATH)?>/custompages/images/bgimage.png" alt="Background"/>-->
<!--/row --></div><!--/容器-->
`
问题是我无法将图像背景设置为第二列,该列调整大小并覆盖右侧的列-md-6.
这是一个小草图:
解决方案
2018 年更新
Bootstrap 4,概念还是一样的:https://codeply.com/go/ffaQgse2SU
我已经回答了类似的问题,但你的是有点不同,因为 background-image
.我发现的最好方法是使用 CSS 伪元素,因为它会与正确的 col-md-6
一起调整,因此可以响应式工作.
Bootstrap 3 演示:http://codeply.com/go/rWOGi4LrU1
.right {z-索引:0;颜色:#fff;}.就在之前 {背景图片:网址(..);内容: '';显示:块;位置:绝对;z-索引:-1;宽度:999em;/* 允许引导列填充 */顶部:-15px;左:-15px;底部:-15px;}
演示
另见:获取具有不同背景的两列延伸到屏幕边缘的颜色
I need to code the next example:
I'm coding all website using bootstrap and the code of this section is this:
`<div class="bg_blue">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-6">
<div id="login-form-box" class="form-box">
<div id="login-form-info" class="form-info">
<?php if (isset($content['info']) && !empty($content['info'])) {
echo $content['info'];
}
?>
</div>
<?php if (isset($error_message)) {
echo '<div id="login-form-info" class="form-error">'.$error_message.'</div>';
}
?>
<form id="login-form" class="form" action="<?php echo api_get_path(WEB_PATH)?>index.php" method="post">
<div>
<label for="login"><?php echo custompages_get_lang('User');?></label>
<input name="login" type="text" /><br />
<label for="password"><?php echo custompages_get_lang('Password');?></label>
<input name="password" type="password" /><br />
</div>
</form>
<div id="login-form-submit" class="form-submit" onclick="document.forms['login-form'].submit();">
<span><?php echo custompages_get_lang('LoginEnter');?></span>
</div> <!-- #form-submit -->
<div id="links">
<?php if (api_get_setting('allow_registration') === 'true') { ?>
<a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/inscription.php?language=<?php echo api_get_interface_language(); ?>">
<?php echo custompages_get_lang('Registration')?>
</a><br />
<?php } ?>
<a href="<?php echo api_get_path(WEB_CODE_PATH); ?>auth/lostPassword.php?language=<?php echo api_get_interface_language(); ?>">
<?php echo custompages_get_lang('LostPassword')?>
</a>
</div>
</div>
</div>
<div class="col-md-6">
<!-- <img class="img" src="<?php echo api_get_path(WEB_PATH)?>/custompages/images/bgimage.png" alt="Background" /> -->
</div>
</div> <!-- /row -->
</div><!-- /container -->
</div>`
The problem is that I cant set the image background to the second column that resizes and that covers the full with out of the column-md-6 to the right.
Here's a little sketch:
解决方案
Updated 2018
Bootstrap 4, the concept is still the same: https://codeply.com/go/ffaQgse2SU
I have answered similar questions on this, but yours is a little different because the background-image
. The best way I've found is using a CSS pseudo element becuase it adjusts along with right col-md-6
and therefore works responsively.
Bootstrap 3 Demo: http://codeply.com/go/rWOGi4LrU1
.right {
z-index: 0;
color: #fff;
}
.right:before {
background-image:url(..);
content: '';
display: block;
position: absolute;
z-index: -1;
width: 999em;
/* allow for bootstrap column padding */
top: -15px;
left: -15px;
bottom: -15px;
}
Demo
Also see:
Get Two Columns with different background colours that extend to screen edge
这篇关于是否可以在超大 div 的引导列中设置背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文