2
我正在使用引導程序3製作響應式網站，而我只是剛開始使用它，所以我還沒有真正掌握它。我在容器內製作了2列。在第一列中，我有一個導航欄/圖像，第二列中有文本。我試圖在導航欄/圖像下添加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{
\t background-color: #292c2f;
\t box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
\t box-sizing: border-box;
\t width: 100%;
\t text-align: center;
\t font: normal 18px sans-serif;
\t padding: 15px;
\t margin-top: 80px;
}
.footer-basic-centered .footer-company-motto{
\t color: #8d9093;
\t font-size: 24px;
\t margin: 0;
}
.footer-basic-centered .footer-company-name{
\t color: #8f9296;
\t font-size: 14px;
\t margin: 0;
}
.footer-basic-centered .footer-links{
\t list-style: none;
\t font-weight: bold;
\t color: #ffffff;
\t padding: 35px 0 23px;
\t margin: 0;
}
.footer-basic-centered .footer-links a{
\t display:inline-block;
\t text-decoration: none;
\t color: inherit;
}
@media (max-width: 600px) {
\t .footer-basic-centered{
\t \t padding: 35px;
\t }
\t .footer-basic-centered .footer-company-motto{
\t \t font-size: 18px;
\t }
\t .footer-basic-centered .footer-company-name{
\t \t font-size: 12px;
\t }
\t .footer-basic-centered .footer-links{
\t \t font-size: 14px;
\t \t padding: 25px 0 20px;
\t }
\t .footer-basic-centered .footer-links a{
\t \t line-height: 1.8;
\t }
}
/*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>
\t \t \t <div class="centerBlock">
\t \t \t <div><img class="img-responsive gallery" src="Graphics/">
\t \t \t </div>
\t \t \t <div><img class="img-responsive gallery" src="Graphics/">
\t \t \t </div>
\t \t \t <div><img class="img-responsive gallery" src="Graphics/">
\t \t \t </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>任何幫助表示讚賞！如果需要其他信息，我很樂意幫助。
啊，我認爲這將是愚蠢的，感謝您的幫助！ – Sean2148