将多个 svg 放在一个 div 行 bootstrap 5

Question

我想在 div 元素中放置多个图标，当浏览器窗口改变大小时，该元素应该调整大小。

我的问题是，svg 总是在彼此之下，除非我给它们固定的像素大小，这意味着它们不会再调整大小。我希望他们有一个固定的最小尺寸，但随着父 div 的增长而增加尺寸：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bg-dark text-white">
    <div class="col-sm-2  d-flex align-items-center">
        <span class="text-end">hello</span>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">1</span>
        </div>
        <div class="row">
            <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
        </div>
    </div>
    <div class="col-sm-2">
        <div class="row">
            <span class="text-center">this one is wider</span>
        </div>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">3</span>
        </div>
    </div>    
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">4</span>
        </div>
         <div class="row">
            <svg xmlns="http://www.w3.org/2000/svg" width="10%" height="10%" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="10%" height="10%" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
        </div>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">5</span>
        </div>
    </div>           
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">6</span>
        </div>
    </div>        
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">no resize :(</span>
        </div>
        <div class="row">
          <p>
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
           </p>
        </div>
    </div> 
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">8</span>
        </div>
    </div>
    <div class="col-sm-1 d-flex align-items-center">
        <span class="text-end">...</span>
    </div>

如何更改我的 SVG 设置，以使其中至少两个在我的 div class="col" 元素中始终彼此相邻？

Answer 1

由于您使用的是 Bootstrap，我建议您在行内创建另一个 col 布局，其中两个 col-6 列跨越行宽的一半。

查看下面的 sn-p - 附加类 .svg-column 仅用于较小的间距调整。

.svg-column {
  text-align: center;
  padding: 0.5em;
  place-self: center;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bg-dark text-white">
  <div class="col-sm-2  d-flex align-items-center">
    <div class="row text-center">
      <span class="text-center">hello</span>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="row text-center">
      <span class="text-center">1</span>
    </div>
    <div class="row">
      <div class="col-6 svg-column">
        <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
      </div>
      <div class="col-6 svg-column">

        <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
      </div>
    </div>
  </div>

  <div class="col-sm-2 d-flex align-items-center">
    <span class="text-end">world</span>
  </div>

</div>