Question

似乎所有东西都定位在我想要的地方，但图像和视频会与较小尺寸的jumbotron重叠。我检查了其他帖子，但没有找到任何有用的回答我的问题。我应该澄清它出现在jumbotron的右侧。

<style>
    body {
    margin: 20px;
}
    #img_position {
    position: relative;
            left: 14%;
            padding: 15px;
        max-width: 100%;
            }

            #jumbo
            {
            background-color: #bfff80;
            font-family: 'Cinzel', serif;
                min-width: 100%;
            }
    .gw_vid{
        position:relative;
        padding-top:5%;
        max-width:32%;
        margin:0 auto;
    }
            </style>

        <div class="container box ">
            <div id="jumbo" class="jumbotron box">
            <h1 style="text-align: center">George Washington</h1>
                <h4 style="text-align:center">The first President of the Untited States of America</h4>
                <img id="img_position" src="http://projectmanagementhacks.com/wp-content/uploads/2015/03/George-Washington-Success-Principles.jpg">
                <div class="gw_vid">
                <iframe width="350px" height="350px"  src="https://www.youtube.com/embed/thin1LeCrxY" target="blank"></iframe>
            </iframe>
                </div>
            </div>

我在我的图片中添加了col-md-12，现在解决了这个问题，但我尝试了col-md-12和视频并没有取得好成绩。任何有关视频问题的帮助都会很棒。

Answer 1

我把你的代码放到Codepen中它告诉我我不需要标签，首先在我拿出样式标签后我运行代码并且它看起来非常好。我相信解决方案是为CSS创建一个新文件然后将它们链接在头部。如果您不知道如何操作，请输入以下代码

<link rel="stylesheet" type="text/css" href="nameoffyourfile.css"


        **HTML**
<div class="container box ">
<div id="jumbo" class="jumbotron box">
<h1 style="text-align: center">George Washington</h1>
<h4 style="text-align:center">The first President of the Untited States of 
America</h4>
<img id="img_position" src="http://projectmanagementhacks.com/wp-
content/uploads/2015/03/George-Washington-Success-Principles.jpg">
<div class="gw_vid">
  <iframe width="350px" height="350px" 
src="https://www.youtube.com/embed/thin1LeCrxY" target="blank"></iframe>
  </iframe>
</div>
</div>

  **CSS**

body {
margin: 20px;
}

#img_position {
position: relative;
left: 14%;
padding: 15px;
max-width: 100%;
}

#jumbo {
background-color: #bfff80;
font-family: 'Cinzel', serif;
min-width: 100%;
}

.gw_vid {
 position: relative;
 padding-top: 5%;
 max-width: 32%;
 margin: 0 auto;
 }

Answer 2

由于您使用的是Bootstrap，因此您可以对YouTube视频使用原生响应式嵌入：http://getbootstrap.com/components/#responsive-embed

当我将它们调整到较小的尺寸时，我的图像和我的iframe视频落在我的超大屏幕之外。我该如何防止这种情况？

2 个答案: