Question

使用BS4，如何在移动设备上将图像拉伸到屏幕边框，同时保持容器对所有其他元素（例如div，h1等）的操作？

我的问题是我可以使用媒体查询轻松更改容器宽度，但这会影响所有元素。此外，图像不应伸展到桌面上的边框，这就是为什么我不能只使用通用的容器流体。

我也尝试过使用负边距：

＆＃13;

@media (max-width: 575px) {
  .mobile-stretch {
    margin-left: -15px;
    margin-right: -15px;
  }
}

＆＃13;

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12">
      <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" />
     </div>
  </div>
</div>

＆＃13;

不确定原因，但它只延伸到左边框，同时保持右边的边框。我错过了什么？

Answer 1

你不能添加容器流体类代替容器，容器类中的其他东西居中吗？

.no-gutters {
  margin-right: 0;
  margin-left: 0;
  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row no-gutters">
    <div class="col-12">
      <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" />
     </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-12">
      <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" />
     </div>
  </div>
</div>

Bootstrap图像仅在移动设备上延伸到边框

1 个答案: