Как заставить эти изображения SVG выравниваться бок о бок, не исчезая? - PullRequest
Новая
       50

Как заставить эти изображения SVG выравниваться бок о бок, не исчезая?

0 голосов
/ 04 мая 2020

У меня есть код, который выглядит следующим образом (с использованием 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

Если я использую float или d-flex в попытке заставить изображения появляться в одной строке, изображения полностью исчезают.

Из того, что я прочитал, это связано с тем, что SVG реагируют и выбирают размер для родителя, что не имеет размера по умолчанию. Я думаю, что могу определить размер в родительском контейнере, но пытаюсь понять лучший способ сделать это Bootstrap одобренным способом.

Есть предложения?

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Вы можете сделать что-то вроде этого:

svg слишком велик, поэтому я указал размер fo 100px каждый, использование flex позаботится о вашем требовании. 

.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>
0 голосов
/ 04 мая 2020

Нет col-xs-4, насколько я вижу из https://getbootstrap.com/docs/4.4/layout/grid/#grid -опций , вы могли бы иметь в виду 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>
...