Bootstrap 4.1-Flex项目-向左对齐(仅最后一行)

Question

如何使用bootstrap修复最后一行的项在左侧对齐的问题？

img{
max-width: 137px;
}
li{
display: inline-block
}
ul{
padding-left: 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="w-100">
<ul class="d-flex flex-wrap">
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="img-fluid flex-fill"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
</ul>
</div>

Answer 1

flex-fill使项目增长到最大宽度。删除flex-fill，只使用填充。。。

<div class="w-100">
<ul class="d-flex flex-wrap">
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
<li class="px-4"><img src="https://www.peregrineadventures.com/sites/peregrine/files/styles/low-quality/public/elements/product/hero/russia.jpg" alt=""></li>
</ul>
</div>

https://codeply.com/go/OLNl0s8D2y