我需要编写下一个示例代码:
我使用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>`
问题在于我无法将图像背景设置为第二列调整大小,并且覆盖了右边的列-md-6中的完整列。
这里有一个小草图:
答案 0 :(得分:2)
如果您想仅定位中等屏幕尺寸,您可以通过以下方式进行操作。将width: 120%
提供给你的img元素,它会溢出并占据左边的全部大小。
工作代码
.img {
width: 120%;
}
.col-md-6 {
background-color: green;
}
&#13;
<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 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">
</div>
<form id="login-form" class="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" class="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 class="col-md-6">
<img class="img" src="https://www.w3schools.com/css/trolltunga.jpg" alt="Background" />
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
</body>
</html>
&#13;
注意:强>
如果您想要定位所有屏幕尺寸的媒体,那么只需使用col-lg-* col-xs-* col-sm-*
即不同的响应式引导类。
希望这有帮助!
答案 1 :(得分:2)
2018年更新
Bootstrap 4 ,概念仍然相同:https://www.codeply.com/go/ffaQgse2SU
我已经就此问题回答了similar questions,但是因为background-image
,你的回答有点不同。我发现的最好的方法是使用CSS伪元素,因为它会与右col-md-6
一起调整,因此会起作用。
Bootstrap 3演示:http://www.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;
}
另见: Get Two Columns with different background colours that extend to screen edge
答案 2 :(得分:-1)