Bootstrap 对齐图像适合框

Question

在下面的图片中，我有我的项目的屏幕截图。红线上方表示其当前状态。红线下方是我想要实现的目标。问题是，我无法全屏显示它，我的意思是它需要填充到角落。我正在使用 Bootstrap 4，我尝试了很多不同的方法来实现这一点，但我无法做到这一点，我现在有点急需帮助。这是图片：

它很容易构建，您可以在下面的代码中看到它。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

<div class="row">
  <div class="col-md-12" id="page1">
      <div class="list-group">
          <a href="bericht.html" class="list-group-item list-group-item-action flex-column align-items-start">
              <div class="col-md-2">
                  <img src="https://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder-800x423.gif" alt="" style="width: 100%">
              </div>
              <div class="col-md-6">
                  <h6 class="mb-1">Bootstrap element out of alignment</h6>
                  <p class="mb-1" style="font-size: 14px">Donec id elit non mi porta gravida at eget metus. Maecenas...</p>
                  <small class="float-right text-muted">25 minuten geleden door Henk</small>
              </div>
              <div class="col-md-2">
                  <h6 class="text-center">Reacties</h6>
                  <p class="text-center">57</p>
              </div>
              <div class="col-md-2">
                  <h6 class="text-center">Weergaven</h6>
                  <p class="text-center">2.543</p>
              </div>
          </a>
      </div>
   </div>
 </div>

提前致谢

Answer 1

Bootstrap 的 Grid 具有默认的 margin 和 padding，可以通过将 .no-gutters 类添加到您的 .row 来删除它们。下面是一个示例，虽然我已经完全删除了您的超链接，但您如何实现这一点，因为在单个超链接中嵌套复杂结构很好......很乱。

.no-gutters {
  border: 1px solid #ccc;
  width: 100%;
}

.wrapper {
  padding: 15px;
}
    
[data-url] {
  cursor: pointer;
}

<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">
  <div class="row no-gutters" data-url="bericht.html">
    <div class="col-md-2">
      <img src="https://www.jennybeaumont.com/wp-content/uploads/2015/03/placeholder-800x423.gif" width="100%" alt="">
    </div>
				
    <div class="col-md-6">
      <div class="wrapper">
        <h6 class="mb-1">Bootstrap element out of alignment</h6>
        <p class="mb-1" style="font-size: 14px">Donec id elit non mi porta gravida at eget metus. Maecenas...</p>
        <small class="float-right text-muted">25 minuten geleden door Henk</small>
      </div>
    </div>
		
    <div class="col-6 col-md-2">
      <div class="wrapper">
        <h6 class="text-center">Reacties</h6>
        <p class="text-center">57</p>
      </div>
    </div>

    <div class="col-6 col-md-2">
      <div class="wrapper">
        <h6 class="text-center">Weergaven</h6>
        <p class="text-center">2.543</p>
      </div>
    </div>
    
  </div>
</div>

此时唯一缺少的是将点击事件绑定到 data-url 的一些 JavaScript。