Bootstrap对齐图像适合框

Question

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

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

C.objects.filter(b__a='search_id').values('id', 'name', 'b__name', 'b__a__name')

提前致谢

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。