0

当我有一些嵌套网格列时

<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>

一切都很好。文本“一些文本”是第一个，在这个文本下有“第二个文本”和“第三个文本”。

但是当我用谷歌地图 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>

列的顺序被破坏，例如“第二个文本”在 iframe 之上。

嵌套列中带有 iframe 的屏幕截图

非常感谢！

4

1 回答 1

0

我希望这会有所帮助：

<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>

于 2018-08-01T11:12:51.140 回答