javascript - 单击时如何在 div 内容的底部添加边框

Question

我正在使用react以在顶部显示一些带有标签的图像，当我单击任何图像时，我想显示一个边框底部。
我成功地做到了这一点，但样式问题 CSS
当我显示 css 时，它没有显示在底部，但在所有图像底部都显示了，这破坏了对齐方式
我正在使用 bootstrap 以获得更好的 UI
我的代码

<div className="App">
  <div className="form-inline">
    {d.map((li, index) => (
       <div key={li.name} onClick={() => img_click_handler(index)}>
         <img src={li.url} alt={li.name} className="image_class" />
         <div className="label_name text-left">{li.name}</div>
         <div className={index === index_id ? "test" : ""} />
         </div>
    ))}
  </div>
</div>

CSS

.App {
  min-height: 17.6vh;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 10px #00000040;
  opacity: 1;
}

.image_class {
  height: 7vh;
  width: 4vw;
  margin-right: 5rem;
}

.label_name {
  padding-top: 1rem;
  width: min-content;
}

.test {
  border-bottom: 4px solid gray;
  background-color: red;
}

问题
问题是 border底部我要显示到栏的末尾 div但它显示在图像底部
Please check this Code sandbox for working example
**我希望边框底部应该到栏的结尾我不知道我做错了什么**

Answer 1

这是一个改变 Codesandbox
我加了 d-flex而不是 form-inline和 d-flex flex-column对于每个列 div。
对于底线，我添加了一个自动边距 mt-auto .
为了在顶部有一个边距，我添加了 mt-3到图像。
可能有更好的解决方案，但它有效。