左侧全角

Question

如何强制col扩展到容器内部右侧的全宽

<div class="container">

    <div class="row">

      <div class="col-5">

        Lorem ipsum
      </div>

      <div class="col-7 img-col">
         <img class="img-fluid" src="https://placeimg.com/640/480/nature/sepia"/>
      </div>

    </div>

  </div>

我尝试在右上角使用绝对位置，但不会向左延伸

https://jsbin.com/cikuragaba/edit?html,output

Answer 1

.container {
  position: relative;
}

.img-col {
  position: fixed;
  right: 0px;
  width: 100%;
  top: 0;
}

.img-fluid {
  width: 100%;
}

这会将其设置为全宽，但是如果您解释要执行的操作，我认为将有比这更好的方法。

Answer 2

我相信div已经全宽，但是图像却没有。添加此CSS：

.img-fluid {
    width: 100%;
}

Answer 3

使用：

.img-col .img-fluid {
     width: 100%
}

这将使您的图像在img-col宽度内为100％。 .img-fluid仅指定最大宽度。首先要具体指定.img-col不会使所有.img-fluid的宽度均为100％。