Question

我很难找到解决问题的方法。

我想要实现的是一个DIV，它位于bootstrap的.container中，可以跨越容器右侧的整个宽度（直到它到达屏幕），但是左边是INSIDE容器。

示例代码：

<div class="container">
  <div class="extended-div"></div>
</div>

我只想让extended-div粘在CONTAINER元素的左边，并从那里一直延伸到屏幕右侧（容器外）。

我附上了一个我想要实现的例子。通常情况下，如果盒子只是BG颜色等等，我要么使用box-shadow，要么：在方法之后，但这不适用于此。

Here's what I'm trying to achieve

提前致谢！

Answer 1

尝试给予扩展div的绝对位置，并且没有正确关闭容器的类标记

 <div class="container">
 <div class="extended-div"></div>
 </div>

Answer 2

首先正确关闭container的类标记。根据需要增加子div的宽度。

＆＃13;

.container{
   background-color:red;
   }
.extended-div
{
  background-color:green; 
  width:110%;
  margin-left:20px;
  margin-top:20px;
}

＆＃13;

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container">
      <div class="extended-div">
        <h1>
          jfksdjfksdjfds
        </h1>
        <h1>
           overflow div sssssssssssssssssssddsssssssdddddddddddd
        </h1>

      </div>
    </div>
  </body>
</html>

＆＃13;

Div从bootstraps容器的左侧扩展到屏幕右侧

2 个答案: