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>

一切正常。文本“一些文本”位于该文本的第一和第二，而“第二文本”和“第三文本”则是

。

但是当我用Google Maps 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上方。

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>

引导网格系统中的iframe不起作用

1 个答案: