Question

我正在构建一个简单的静态网站。我正在使用Spring Boot，Thymeleaf Layout Dailect和Bootstrap4。在我的layout.html中，有一行包含内容和侧边栏。我的侧边栏中有2张照片，在所有视图中，它们都显示在右侧。但是，当我尝试在Google地图或Facebook页面中嵌入iframe时，侧边栏会被下推。我尝试了一些其他操作，例如将iframe的大小更改为最小等，但是我无法将侧边栏保持在右侧。请问有人可以提出解决方案吗？

下面是我的layout.html：

<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
    <div class="row">
        <div class="col-md-8">
            <div layout:fragment="content"></div>
        </div>          
        <div class="col-md-4">
            <div th:replace="fragments/sidebar :: sidebar"></div>
        </div>
    </div>
</div>  
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>

下面是我的sidebar.html：

<body>

<div th:fragment="sidebar">
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-body">
                <img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <img src="/img/ueshiba-laughter.jpg" alt="Logo"
                    style="width: 330px;" ></img>
            </div>
        </div>
    </div>
</div>

</body>

以下是我的内容：

<body>

<div layout:fragment="content">

<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page.  We look forward to hearing from you.</p>

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>

</body>

侧边栏的正常行为-白色图片“ Ai Ki Do”和右侧深色图片：

嵌入iframe后，侧边栏向下推：

Answer 1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="row">
<iframe src="https://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>
<div>
    another one
</div>
</div>

由于某种原因，当我从div中删除col类并将它们连续放置时，这两部分不会相互重叠

在开发人员模式下，您是否尝试过在浏览器中检查元素并编辑CSS类？之前我遇到过同样的问题，我所做的只是弄乱了控制台中的代码，直到最终改变了我想要的方式。

Answer 2

在其中放置新的行和列：

<div layout:fragment="content"></div>

为我工作。

<div layout:fragment="content">
    <div class="row">
        <div id="dojo-page" class="col-md-12">
            <div id="fb-frame" class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" width="600" height="450"
                    frameborder="0" style="border: 0"
                    src="path-for-google-map-location"
                    allowfullscreen></iframe>
            </div>
        </div>
    </div>

为什么嵌入iframe会向下推边栏？

2 个答案: