Bootstrap图像不会并排

时间：2017-05-02 03:30:49

标签： html css twitter-bootstrap twitter-bootstrap-3

我正在为学校做一个项目，我基本上是为这些医学上脆弱的孩子创建一个故事库。我想基本上在页面的宽度上创建一个预览窗口3，然后在故事中创建尽可能多的预览窗口。现在我的盒子正是我想要的东西，因为我不能让另一个盒子靠近它。我不知道为什么会这样。这是我的代码，抱歉它太乱了，特别是我谈论的底部部分。

<!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{
	font-size: 50px;
	color:white;
	font-family:'Lobster';
	height: 100%;
}

#list{
	color: white;
	font-family: 'Abel';
	font-size: 30px;
}

p{
	font-family: 'Kanit';
  font-size: 20px;
}

#navbar{
  padding-top:20px;
}

#alone{
	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{
	font-size: 60px;
	position: absolute;
	z-index: 1;
	top:175px;
	left: 43%;
	color: black;
	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>
    	</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>
   	      <li><a href="contact.html" id="list">Contact</a></li>
   		    <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">
	<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">
	<div class="row">
		<div class="container">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="text-uppercase bottomimage">
				 <h1> Stories </h1>
			  </div>
		  </div>
	 </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>

1 个答案:

答案 0 :(得分：0)

<!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{
	font-size: 50px;
	color:white;
	font-family:'Lobster';
	height: 100%;
}

#list{
	color: white;
	font-family: 'Abel';
	font-size: 30px;
}

p{
	font-family: 'Kanit';
  font-size: 20px;
}

#navbar{
  padding-top:20px;
}

#alone{
	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{
	font-size: 60px;
	position: absolute;
	z-index: 1;
	top:175px;
	left: 43%;
	color: black;
	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>
    	</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>
   	      <li><a href="contact.html" id="list">Contact</a></li>
   		    <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>
	</div>
  </nav>
 </div>
<div class="jumbotron" id="box-wrapper">
  <div class="container">
    <div class="row">
     <div class="col-lg-12"></div>
        <div class="text-uppercase middleimage">
          <h1 style="color:gray;">You're Not Alone</h1>
        </div>
    </div>
  </div>
</div>
<div class="container">
	<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>
<div class="jumbotron" id="alone">
	<div class="row">
		<div class="container">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="text-uppercase bottomimage">
				 <h1> Stories </h1>
			  </div>
		  </div>
	 </div>
 </div>
</div>

<div class="container">
	<div class="row">
		<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>

		<div class="story1 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 class="story1 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>
		  </a>
		</div>

	</div>
</div>
</body>
</html>

在这里，我为您准备了一个基本的解决方案。 希望它对你有用！如果你还有任何疑问那么请问我。谢谢

相关问题
最新问题