Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]

后端未结

关注

 3  1257

猫巷女王i

相关标签:

3条回答

春和景丽

2020-11-29 14:35
Updated 2018

Bootstrap 4, the concept is still the same: https://www.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://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;
}
```
Demo

Also see: Get Two Columns with different background colours that extend to screen edge
0 讨论(0)
发布评论:

提交评论
- 加载中...

旧时难觅i

2020-11-29 14:42

If you would like to target only medium screen sizes you can do it in the following way. give width: 120% to your img element and it will overflow and take the full size at the left.

working snippet

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

NOTE:

If you want to target all screen sizes media then just use col-lg-* col-xs-* col-sm-* i.e different responsive bootstrap classes.

Hope this helps!

0 讨论(0)

暖寄归人

2020-11-29 14:47

I finally did it by removing the "container" div.

Now I got a big problem in mobile, that the background image is lost on mobile.

http://www.thalescampusvirtual.com/index.php

0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题