bootstrap 网格系统中的 iframe 不工作

Question

当我有一些嵌套的网格列时

<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        some text
        <div class="row">
            <div class="col-lg-3">
               second text
            </div>
            <div class="col-lg-9">
                third text
            </div>
        </div>
    </div>
    <div class="col-lg-1"></div>
</div>

一切正常。文本 "some text" 是第一个，在此文本下有 "second text" 和 "third text".

但是当我将 "some text" 更改为 google 映射 iframe 时

<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <iframe class="map" src="https://www.google.com/maps/..." width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
        <div class="row">
            <div class="col-lg-3">
               second text
            </div>
            <div class="col-lg-9">
                third text
            </div>
        </div>
    </div>
    <div class="col-lg-1"></div>
</div>

列的顺序被破坏了，例如"second text" 则在 iframe 之上。

screenshot with iframe in nested columns

非常感谢！

Answer 1

希望对您有所帮助：

<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="row">
  <div class="col-lg-1"></div>
  <div class="col-lg-10">
    <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d317718.69319292053!2d-0.3817765050863085!3d51.528307984912544!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon!5e0!3m2!1sen!2suk!4v1533121813728" width="100%" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
    <div class="row">
      <div class="col-lg-3"> second text </div>
      <div class="col-lg-9"> third text </div>
    </div>
  </div>
  <div class="col-lg-1"></div>
</div>
</body>

bootstrap 网格系统中的 iframe 不工作

iframe in bootstrap grid system does not work

html

iframe

bootstrap-grid