1
我正在爲學校製作一個項目，我基本上爲這些醫療上脆弱的孩子創建了一個故事庫。我想基本上創建一個預覽窗口3在整個頁面的寬度，然後儘可能多的向下，因爲我們有故事。現在我的盒子完全是我想要的東西，我不能讓另一個盒子走到旁邊。我不知道這是爲什麼。這是我的代碼，很抱歉，它很雜亂，尤其是我正在談論的底部。Bootstrap圖像不會並排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Hope's Seed</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Abel|Kanit|Lobster" rel="stylesheet">
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script>
<style>
.navbar-brand{
\t font-size: 50px;
\t color:white;
\t font-family:'Lobster';
\t height: 100%;
}
#list{
\t color: white;
\t font-family: 'Abel';
\t font-size: 30px;
}
p{
\t font-family: 'Kanit';
font-size: 20px;
}
#navbar{
padding-top:20px;
}
#alone{
\t background-image: url(/Users/adk6332/Desktop/Bootstrap/images/alone.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
}
.navbar-header{
padding-top:20px;
padding-left: 9px;
}
#three{
height: 900px;
width: 100%;
}
#box-wrapper{
background-image: url(/Users/adk6332/Desktop/Bootstrap/images/imagethree.png);
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
min-height: 500px;
}
#logo{
padding:0px;
}
.middleimage{
position: absolute;
z-index: 1;
top:275px;
left: 485px;
color: white;
font-family:'Abel';
}
.bottomimage{
\t font-size: 60px;
\t position: absolute;
\t z-index: 1;
\t top:175px;
\t left: 43%;
\t color: black;
\t font-family:'Abel';
}
.story1
{
background-color: #d9d7d6;
width: 300px;
height: 400px;
margin-left: 30px;
}
.info1{
font-size: 15px;
color: black;
padding-left: 10px;
line-height: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#p1{
font-size: 12px;
color: black;
padding: 5px;
}
.story2{
background-color: #d9d7d6;
width: 300px;
height: 400px;
margin-left: 30px;
margin-top: 30px;
top:-300;
}
.info2{
font-size: 15px;
color: black;
padding-left: 10px;
line-height: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#p2{
font-size: 12px;
color: black;
padding: 5px;
}
</style>
</head>
<body>
<div id="navigation">
<nav class="navbar navbar-transparent navbar-custom navbar-fixed-top" style="background-color:#54E10D;">
<div class="container-fluid">
<a href="#" class="navbar-left"><img src="/Users/adk6332/Desktop/Bootstrap/images/logo.png"
style="height:94px; width: 115px;" id="logo"></a>
<div class="navbar-header">
<a class="navbar-brand "href="hopesseed-homepage.html" id="list">Hope's Seed</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
\t </div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li class="active"><a href="hopesseed-homepage." id="list">Home</a></li>
<li><a href="about.html" id="list">About</a></li>
\t <li><a href="contact.html" id="list">Contact</a></li>
\t \t <li><a href="donate.html" id="list">Donate</a></li>
<li><a href="sponsors.html" id="list">Sponsors</a></li>
<li><a href="stories.html" id="list">Stories</a></li>
</ul>
</div>
</nav>
</div>
<br>
<br>
<br>
<br>
<div class="jumbotron" id="box-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12"></div>
<div class="text-uppercase middleimage">
<h1>You're Not Alone</h1>
</div>
</div>
</div>
</div>
<br>
<br>
<div class="container">
\t <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laorum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<br>
<br>
<br>
<br>
<div class="jumbotron" id="alone">
\t <div class="row">
\t \t <div class="container">
\t \t \t <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
\t \t \t \t <div class="text-uppercase bottomimage">
\t \t \t \t <h1> Stories </h1>
\t \t \t </div>
\t \t </div>
\t </div>
</div>
</div>
<div class="row container-fluid">
<div class="story1 col-md-4 col-lg-4">
<a href="story-number-one.html">
<img src="/Users/adk6332/Desktop/Bootstrap/images/imagetwo.jpg" style="max-height:100%; max-width:270px;" class="img-responsive">
<div class="info1">
<h1 style="font-size:15px; margin-top: 0px; margin-bottom: 5px;"> Name: John AppleSeed </h1>
<h1 style="font-size:15px; margin-top: 0px; margin-bottom: 5px;"> Age: 12 years old </h1>
</div>
<p id="p1">ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
upt cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="story2 col-md-4 col-lg-4">
<a href="story-number-two.html">
<img src="/Users/adk6332/Desktop/Bootstrap/images/imagetwo.jpg" style="max-height:100%; max-width:270px;" class="img-responsive">
<div class="info2">
<h1 style="font-size:15px; margin-top: 0px; margin-bottom: 0px;"> Name: John AppleSeed </h1>
<h1 style="font-size:15px; margin-top: 0px; margin-bottom: 0px;"> Age: 12 years old </h1>
</div>
<p id="p2">ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vol
upt cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</a>
</div>
</div>
</body>
</html>