gcogco10 Ответов: 2

Как создавать iframes бок о бок с помощью bootstrap или codepen

Я хочу создавать бок о бок iframe, в отличие от одной строки каждый раз. Есть ли способ? Моя логика для HTML такова, как показано ниже, но моя-строка за строкой. Пожалуйста, помогите товарищам, спасибо.

Что я уже пробовал:

<pre><div class="iframe-container">
  <iframe width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15"></iframe>
</div>
<br/>
<div class="iframe-container">
  <iframe width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15"></iframe>
</div>
<br/>
<div class="iframe-container">
  <iframe width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15"></iframe>
</div>
<div class="wrapper" align="center">
  <div class="btn-group" id="toggle_event_editing">
    <button type="button" class="btn btn-danger locked_active">OFF</button>
    <button type="button" class="btn btn-success unlocked_inactive">ON</button>
  </div>
  <div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<br/>

ZurdoDev

Если вы загуглите вопрос, то в интернете есть много примеров.

ZurdoDev

И Вы, кажется, уже задавали этот вопрос.

2 Ответов

Рейтинг:
2

MadMyche

Причина, по которой вы видите это, заключается в том, что ДИВ. это элемент уровня блока, и его поведение по умолчанию заключается в том, чтобы складываться вертикально, как вы обнаружили.
Способы изменить это поведение предназначены для того, чтобы этот DIV имел стили помещенные на него, которые изменяют значения по умолчанию или вкладывают его в встроенный элемент.

Существует несколько способов сделать это; вы можете использовать такую библиотеку, как Начальная загрузка что даст вам предопределенный стиль элемента, или вы можете просто добавить несколько строк CSS, чтобы сделать то же самое.

Я не собираюсь вдаваться в подробности. Начальная загрузка как это хорошо задокументировано.

Чтобы сделать это с помощью CSS, вы можете просто изменить Дисплей параметр DIV, о котором идет речь, чтобы встроенный или встроенный блок/
Следующий код, добавленный в голова из вашего документа будут изменены все дивы, которые имеют iframe-контейнер класс, который позволит вашим iframes быть бок о бок (если это позволяет ширина страницы)

<style type="text/css">
  .iframe-container { display: inline-block; }
</style>
Добавление во вторую строку CSS позволит вам удалить некоторые атрибуты из iframes (height, width, style)
<style type="text/css">
  .iframe-container {display: inline;}
  .iframe-container iframe {height: 180px; width: 600px; border: 2px solid #ccc;}
</style>

Рейтинг:
14

Afzaal Ahmad Zeeshan

Цитата:
Я хочу создать бок о бок iframe,
Если вы хотите, чтобы они были показаны бок о бок, то используйте сеточную систему Bootstrap. Вы можете создать одну строку, тогда 6 на 6 столбцов будут содержать iframes бок о бок.

Сеточная система · Bootstrap[^]

Что-то вроде этого:
<div class="container">
  <div class="row">
    <div class="col">
      <p>First iframe here.</p>
    </div>
    <div class="col">
      <p>Second iframe here.</p>
    </div>
  </div>
</div>
Попробуйте быстренько поиграть на скрипке здесь, Bootstrap grid - JSFiddle[^]