如何使这些 SVG 图像并排对齐而不消失？

Question

我有一些代码看起来像这样（使用 Bootstrap 4）：

<header>
  <div class="row">
    <div class="col-xs-12 col-md-9">
     <h1>Single and Satisfied</h1>
  </div>
  <div class="col-xs-12 col-md-3">
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg">
     </div>
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg">
     </div>
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg">
     </div>
   </div>
  </div>
</header>

我这里还有一个 CodePen：https://codepen.io/davidshq/pen/VwvrRGg

我希望结果看起来像这样：

Single and Satisfied Image1 Image2 Image3

相反，我得到的是这样的：

Single and Satisfied  Image1
                      Image2
                      Image3

如果我使用浮动或 d-flex 试图让图像出现在同一行上，图像将完全消失。

根据我的阅读，这与 SVG 响应并根据父级调整自身大小有关，默认情况下没有大小。我想我可以在父容器上定义一个大小，但试图了解以 Bootstrap 批准的方式执行此操作的最佳方法。

有什么建议吗？

Answer 1

你可以这样做：

The svg is too big so I have given size fo 100px each, using flex will take care of your requirement.

.row,.align{
  display:flex; 
}

<header>
  <div class="row">
    <div class="col-xs-12 col-md-9">
     <h1>Single and Satisfied</h1>
  </div>
  <div class="col-xs-12 col-md-3 align">
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
     </div>
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
     </div>
     <div class="col-xs-4">
       <img src="https://svgshare.com/i/Kmq.svg" style="height:100px;width:100px;">
     </div>
   </div>
  </div>
</header>

Answer 2

据我所知 https://getbootstrap.com/docs/4.4/layout/grid/#grid-options 没有 col-xs-4，你可能是说 col-4。

由于您试图将三张图片排成一行，因此应将它们用 .row:

包裹起来

<div class="row">
  <div class="col-4">
    <img src="https://svgshare.com/i/Kmq.svg" />
  </div>
  <div class="col-4">
    <img src="https://svgshare.com/i/Kmq.svg" />
  </div>
  <div class="col-4">
    <img src="https://svgshare.com/i/Kmq.svg" />
  </div>
</div>

如何使这些 SVG 图像并排对齐而不消失？

How to make these SVG images align side by side without vanishing?

css

svg

responsive-design

twitter-bootstrap

bootstrap-4