Создание адаптивного фрейма в стартовой сетке - PullRequest
Новая
       18

Создание адаптивного фрейма в стартовой сетке

0 голосов
/ 23 мая 2018

Я использую Bootstrap для сетки.Я добавляю iframe в первый столбец, но он не реагирует на изменения размера браузера.Я использую width:100%, но содержимое скрывается вместо изменения размера.

См. demo

код iframe, полученный из здесь . 

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6" style="background-color:yellow;">
<iframe frameborder="0"  scrolling="no" width="100%" height="700" src="https://www.fctables.com/england/premier-league/iframe/?type=table&lang_id=2&country=67&template=10&team=&timezone=Europe/Chisinau&time=24&po=1&ma=1&wi=0&dr=0&los=0&gf=0&ga=0&gd=1&pts=1&ng=0&form=0&width=240&height=700&font=Verdana&fs=11&lh=22&bg=FFFFFF&fc=333333&logo=1&tlink=0&ths=1&thb=1&thba=FFFFFF&thc=000000&bc=dddddd&hob=f5f5f5&hobc=ebe7e7&lc=333333&sh=1&hfb=1&hbc=3bafda&hfc=FFFFFF"></iframe><div style="text-align:center;"></div>
    </div>
    <div class="col-sm-9 col-md-6" style="background-color:pink;">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Добавьте класс 'embed-responseive embed-responseive-16by9' к своему родителю, который содержит iframe.И добавьте в свой iframe 'embed-response-item' и удалите ширину из iframe.

Попробуйте: 

<div class="container-fluid">
   <div class="row">
       <div class="col-sm-3 col-md-6 embed-responsive embed-responsive-16by9" style="background-color:yellow;">
           <iframe frameborder="0" class="embed-responsive-item"  scrolling="no" height="700" 
                 src="https://www.fctables.com/england/premier-league/iframe/?type=table&lang_id=2&country=67&template=10&team=&timezone=Europe/Chisinau&time=24&po=1&ma=1&wi=0&dr=0&los=0&gf=0&ga=0&gd=1&pts=1&ng=0&form=0&width=240&height=700&font=Verdana&fs=11&lh=22&bg=FFFFFF&fc=333333&logo=1&tlink=0&ths=1&thb=1&thba=FFFFFF&thc=000000&bc=dddddd&hob=f5f5f5&hobc=ebe7e7&lc=333333&sh=1&hfb=1&hbc=3bafda&hfc=FFFFFF"></iframe><div style="text-align:center;"></div>
       </div>
   <div class="col-sm-9 col-md-6" style="background-color:pink;">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
   </div>
 </div>
</div>
0 голосов
/ 23 мая 2018

Пожалуйста, заключите ваш тег iframe в другой div с классом начальной загрузки 'embed-responseive embed-responseive-16by9'

...