html – 是否可以在超大div的引导列中设置背景?

html – 是否可以在超大div的引导列中设置背景?,第1张

概述参见英文答案 > Extend bootstrap row outside the container                                    4个 我需要编写下一个示例代码: 我正在使用bootstrap对所有网站进行编码,本节的代码如下: `<div class="bg_blue"> <div class="container"> @H_419_4@ 参见英文答案 > Extend bootstrap row outside the container                                    4个
我需要编写下一个示例代码:

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

`<div >        <div >            <!-- Example row of columns -->            <div >                <div >                    <div ID="login-form-Box" >                        <div ID="login-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" >'.$error_message.'</div>';                        }                        ?>                        <form ID="login-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"  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 >                    <!-- <img  src="<?PHP echo API_get_path(WEB_PATH)?>/custompages/images/bgimage.png" alt="Background" /> -->                </div>            </div> <!-- /row -->        </div><!-- /container -->    </div>`

问题是我无法将图像背景设置为第二列调整大小,并且覆盖了整个列,而不是右边的列-md-6.

这是一个小草图:

@H_419_4@解决方法 如果您只想以中等屏幕尺寸为目标,可以按以下方式进行.给你的img元素宽度:120%,它会溢出并在左边取整个尺寸.

工作片段

.img {  wIDth: 120%;}.col-md-6 {  background-color: green;}
<HTML><head>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/CSS/bootstrap.min.CSS">  <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.12.4/jquery.min.Js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/Js/bootstrap.min.Js"></script></head><body>  <div >    <div >      <!-- Example row of columns -->      <div >        <div >          <div ID="login-form-Box" >            <div ID="login-form-info" >            </div>            <form ID="login-form"  action="" method="post">              <div>                <label for="login"></label>                <input name="login" type="text" /><br />                <label for="password"></label>                <input name="password" type="password" /><br />              </div>            </form>            <div ID="login-form-submit"  onclick="document.forms['login-form'].submit();">              <span></span>            </div>            <!-- #form-submit -->            <div ID="links">              <a href="">              </a><br />              <a href="">              </a>            </div>          </div>        </div>        <div >          <img  src="https://www.w3schools.com/CSS/trolltunga.jpg" alt="Background" />        </div>      </div>      <!-- /row -->    </div>    <!-- /container -->  </div></body></HTML>

注意:

如果您想要定位所有屏幕尺寸的媒体,那么只需使用col-lg- * col-xs- * col-sm- *即不同的响应式引导类.

希望这可以帮助!

@H_419_4@ @H_419_4@ @H_419_4@ @H_419_4@ 总结

以上是内存溢出为你收集整理的html – 是否可以在超大div的引导列中设置背景?全部内容,希望文章能够帮你解决html – 是否可以在超大div的引导列中设置背景?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1033078.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-24
下一篇2022-05-24

发表评论

登录后才能评论

评论列表(0条)

    保存