Html 是否可以在引导列中设置超出div大小的背景？

我需要编写下一个示例：

我正在使用bootstrap对所有网站进行编码，本节的代码如下：

`<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>`

`
如果您想只针对中等屏幕大小，可以通过以下方式进行。将
width:120%
赋予您的img元素，它将溢出并占据左侧的完整大小

工作片段


.img{
宽度：120%；
}
.col-md-6{
背景颜色：绿色；
}







2018年更新

Bootstrap 4，概念仍然相同：

我已经回答了这个问题，但是你的有点不同，因为
背景图像
。我发现的最好的方法是使用CSS伪元素，因为它会随着right
col-md-6
进行调整，因此会相应地工作

引导程序3演示：


另见：
我最终删除了“container”div

现在我在手机上遇到了一个大问题，手机上的背景图像丢失了

代替col-md-6，将背景图像提供给row.Hi@davidcafor。您可以直接将cold-md-6设置为div bg blue（与container div类似）的子级，并为其设置边距。为了显示它，在其他div之间可以使用z-index属性。是的，但是如果我删除容器。。。col-md-6和col-md-6将分别没有左边和右边的边距。。。不是吗？
.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;
}