Question

如何使用引导程序将其最后一行的内容对齐在左侧？

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://www.codeply.com/go/OLNl0s8D2y

Bootstrap 4.1-Flex项目-左对齐（仅最后一行）

1 个答案: