时间戳

首页 > 解决方案 > Bootstrap 4.1 - Flex 项目 - 左对齐（仅最后一行）

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

问题描述

如何使用引导程序修复它，最后一行的项目在左侧对齐？

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>

标签： flexboxbootstrap-4

解决方案

这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

推荐阅读