引导程序的flex列填充全宽，如何不拉伸到全宽？

Question

查看此处：

https://getbootstrap.com/docs/4.0/utilities/flex/#direction

项目会拉伸到全宽，但这并不是我想要的结果。

我希望这些物品保持其原始尺寸

这样做的正确方法是什么？

Answer 1

用 col-auto 元素包装 flex-column 元素，以使其占用所需的空间。

  .bd-highlight {
  背景：#eee;
  边框：1px实线
}  

  

  

    

      
弹性项目1 
      
弹性项目2 
      
弹性项目3 
    
  
  

您也可以使用容器。

---

更好的是，使用 d-flex 元素包装 flex-column 元素。但是，如果这样做，请从元素本身中删除 d-flex 和 flex-column 类，而应使用 w-auto 。

  .bd-highlight {
  背景：#eee;
  边框：1px实线
}  

  

  

    

      
弹性项目1 
      
弹性项目2 
      
弹性项目3