需要帮助添加图像到响应式布局

时间：2016-05-13 13:38:05

标签： html css image responsive

我正在使用bootstrap 3创建一个响应式网站，我刚刚开始使用它，所以我还没有真正掌握它。我在一个容器里面做了两列。在第一列中，我有一个导航栏/图像，在第二列中我有文本。我试图在导航栏/图像下添加3个图像（以div为单位），但是当我尝试这样做时，div显示但是右列移动到应该在移动设备上显示的内容。我认为我的媒体查询有一些事情要做，但我不确定如何解决它。 This是我希望它看起来的样子，并且是响应性的，this是我尝试实现图像时发生的事情。

/*style sheet*/


#Backg
{
background-image: url("Graphics/ravenna.png");
background-repeat: repeat;
height: 100%;
}


/*Biggest Container and Pattern Backg*/
#PrimaryC {
padding: 10px;
background-image: url("Graphics/paper_fibers.png");
background-repeat: repeat;
height: 100%;
-moz-box-shadow: 0px 0px 20px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
box-shadow: 0px 0px 20px #000000;
}

#Header /*Retro Games Arcade Logo*/
{
height: 100px;
width: 100%;
background-image: url("Graphics/SiteLogo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
}  

.Content /*Holds Arcade Photo and Text in 2 columns*/
{
width: 100%;
background-color: white;
resize: both;
border-radius: 0px 25px 25px 25px;
border: 1px solid white;
}

#HeaderText /*Title*/
{
font-family:'Rokkitt', serif;
font-size: 35px;
color: black;
text-decoration: underline;
padding-right: 20px;
}

#RegularText /*Main Text Body*/
{


font-family:'Rokkitt', serif;
font-size: 18px;
padding-right: 20px;
}

.dropcap
{ float: left;
 color: #903;
 font-size: 75px;
 line-height: 60px;
 padding-top: 4px;
 padding-right: 8px;
 padding-left: 3px;
 font-family: Georgia; 
 }


#Arcade /*Arcade Photo*/
{
width: 100%;

}

/*Navigational Buttons*/
.post-content
{
font-family:'Didact Gothic', sans-serif;
font-size: 150%; /*20px*/
top: 120px;
left:15px;
position: relative;
 letter-spacing: 2px;

}

#RightRow
{
Position: relative;
}

.centerBlock
{
position: relative;
top: -200px;
padding-left: 10px;
}

.img-responsive.gallery
{
float: left;
width: 158px;
height: 162px;
margin-right: 25px;


}



158, 162

.col-md-12 
{
position: relative;
}




.footer-basic-centered{
	background-color: #292c2f;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	font: normal 18px sans-serif;

	padding: 15px;
	margin-top: 80px;
}

.footer-basic-centered .footer-company-motto{
	color:  #8d9093;
	font-size: 24px;
	margin: 0;
}

.footer-basic-centered .footer-company-name{
	color:  #8f9296;
	font-size: 14px;
	margin: 0;
}

.footer-basic-centered .footer-links{
	list-style: none;
	font-weight: bold;
	color:  #ffffff;
	padding: 35px 0 23px;
	margin: 0;
}

.footer-basic-centered .footer-links a{
	display:inline-block;
	text-decoration: none;
	color: inherit;
}



@media (max-width: 600px) {

	.footer-basic-centered{
		padding: 35px;
	}

	.footer-basic-centered .footer-company-motto{
		font-size: 18px;
	}

	.footer-basic-centered .footer-company-name{
		font-size: 12px;
	}

	.footer-basic-centered .footer-links{
		font-size: 14px;
		padding: 25px 0 20px;
	}

	.footer-basic-centered .footer-links a{
		line-height: 1.8;
	}
}


/*Desktop*/
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 22px;
position: relative;
top: -360px;
}



/*Tablet Devices*/
@media (min-width: 768px) and (max-width: 969px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
top: -270px;
font-size: 50%;


}
}
/*Mobile Devices*/
@media(max-width: 767px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 18px;
position: relative;
font-size: 20%;
top: auto;
} 
.post-content
{
top: 20px;
font-size: 80px;
}}

/*1200*/
@media (min-width: 970px) and (max-width: 1119px) {
#Home, #Stock, #AboutUs, #ContactUs
{
padding-bottom: 25px;
position: relative;
top: -310px;
font-size: 60%;
}}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="Styles.css" />
    <!--Main Style Sheet-->
    <link rel="stylesheet" href="bootstrap.min.css" />
    <!--Bootstrap Style Sheet-->
    <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css' />
    <!--Permanent Marker Font-->
    <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css' />
    <!--Press Start 2P Font-->
    <link href='https://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css' />
    <link href='https://fonts.googleapis.com/css?family=Didact+Gothic' rel='stylesheet' type='text/css' />
    <title>Retro Games Arcade</title>
  </head>
  <body>
    <div id="Backg">
      <div id="PrimaryC" class="container">
        <!--Primary Container-->
        <div id="Header">
          <!--Site Logo-->
        </div>
        <div class="Content">
          <!--Main Content Container-->
          <div class="row">
            <!--Row 1-->
            <div class="col-sm-6">
              <!--Left Col-->
              <img src="Graphics/Arcade.png" id="Arcade" class="hidden-xs" />
              <div class="caption post-content">
                <div id="Home">home</div>
                <!--Home Button-->
                <div id="Stock">stock</div>
                <!--Stock Button-->
                <div id="AboutUs">about us</div>
                <!--About Us Button-->
                <div id="ContactUs">contact us</div>
                <!--Contact Us Button-->
              </div>
			<div class="centerBlock">
			  <div><img class="img-responsive gallery" src="Graphics/">
			  </div>
			  <div><img class="img-responsive gallery" src="Graphics/">
			  </div>
			  <div><img class="img-responsive gallery" src="Graphics/">
			  </div>
            </div>
            <div class="col-sm-6" id="RightRow">
              <!--RightCol-->
              <p id="HeaderText">Welcome to the Retro Games Arcade</p>
              <p id="RegularText">
              <span class="dropcap">H</span>ere you can find a treasure of Retro Video Games, sell your unwanted hardware/software;
              and also have our professional team repair any damaged hand-held gaming devices.
              <br />
              <br />We have one of the biggest collectecions of Retro Video Games in the UK, and have genres ranging from Puzzle
              Games and Platformers, to Roleplaying Games and Stratgey Games.
              <br />
              <br />Our staff have over 100 years combined experience of playing retro video games and a professional certified
              Nintendo technician, so if you want a recommendation for your
              <br />sons birthday present, or you need to get your old GameCube repaired; we are your guys.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <!--Row 2-->
          <div class="col-md-12">
            <img src="Graphics/Aracde3.png" id="Vector" class="img-responsive center-block" class="hidden-xs" />
          </div>
        </div>
        <footer class="footer-basic-centered">
          <p class="footer-company-motto">Expand Your Retro Playground.</p>
          <p class="footer-links">
          <a href="#">Home</a> · 
          <a href="#">Stock</a> · 
          <a href="#">About Us</a> · 
          <a href="#">Contact Us</a></p>
          <p class="footer-company-name">Retro Games Arcade ɠ2015</p>
        </footer>
      </div>
    </div>
  </body>
</html>

任何帮助表示赞赏！如果需要任何其他信息，我也很乐意提供帮助。

1 个答案:

答案 0 :(得分：0)

右侧列包含在页面左侧，因为它位于class="col-sm-6"之前的class="col-sm-6"。

您似乎在</div>之前缺少<div class="col-sm-6" id="RightRow">。

相关问题
最新问题