Spring boot 为什么嵌入iframe会向下推侧边栏？_Spring Boot_Layout_Bootstrap 4_Thymeleaf

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

spring-boot layout bootstrap-4

Spring boot 为什么嵌入iframe会向下推侧边栏？,spring-boot,layout,bootstrap-4,thymeleaf,Spring Boot,Layout,Bootstrap 4,Thymeleaf,我正在建立一个简单的静态网站。我使用的是Spring Boot、Thymeleaf布局Dailect和Bootstrap 4。在my layout.html中，我有一行，其中有一个内容和一个侧边栏。我的侧边栏中有两张照片，在所有视图中都显示在右侧。然而，当我试图用谷歌地图或facebook页面嵌入iframe时，侧边栏会被按下。我尝试了一些不同的方法，例如将iframe的大小更改为最小值等，但我无法将侧边栏保持在右侧。请问有人能提出一个解决方案吗下面是my layout.html： <b

我正在建立一个简单的静态网站。我使用的是Spring Boot、Thymeleaf布局Dailect和Bootstrap 4。在my layout.html中，我有一行，其中有一个内容和一个侧边栏。我的侧边栏中有两张照片，在所有视图中都显示在右侧。然而，当我试图用谷歌地图或facebook页面嵌入iframe时，侧边栏会被按下。我尝试了一些不同的方法，例如将iframe的大小更改为最小值等，但我无法将侧边栏保持在右侧。请问有人能提出一个解决方案吗

下面是my 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>


感谢您对精信网的关注。请通过我们的Facebook页面与我们联系。我们期待着您的来信

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

嵌入iframe后按下侧栏：


您的浏览器不支持iFrame
另一个


您的浏览器不支持iFrame
另一个

在以下内容中放置新行和新列：

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

在以下内容中放置新行和新列：

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