0
我決定在我的網站上實現引導旋轉木馬，我從W3Schools website得到的代碼我按照如何在我的網站上應用幻燈片和幻燈片的說明完美運行，但它的惡作劇我的網站的元素。Bootstrap旋轉木馬幻燈片弄亂了網站的元素和內容
一個例子是，當我申請的幻燈片在我的網站我的字體是Merriweather襯線輪流在CSS比，即使以前輕的字體重量是大膽的。這也發生在我的鏈接上。
另一件事是它增加了我的頁腳和導航欄的寬度。
我想研究更多關於這個問題，但我無法找到任何人誰也有類似的問題。
這裏是我的網站的圖像，而不引導輪播幻燈片代碼：
我真的希望我的網站有引導旋轉木馬幻燈片，因爲它增加了互動性，但在同一時間，我不希望我的內容和元素髮生巨大變化。
任何幫助將不勝感激，以幫助解決這個問題。
這是CSS和HTML（如果你想看到的引導傳送帶幻燈片對元素和內容在我的網站的影響，運行下面的代碼片段）
html,
body {
background-color: #09018a;
}
#container {
width: 1200px;
height: 1300px;
border: 3px solid #ffbd1e;
background-color: #FFFFFF;
position: absolute;
left: 140px;
top: 8px;
}
#nav {
width: 1200px;
height: 75px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background-color: #d7001f;
position: absolute;
top: 250px;
}
#footer {
width: 1200px;
height: 100px;
position: relative;
background-color: #d7001f;
top: 570px;
font-family: 'Merriweather', serif;
}
#footer a:hover {
color: rgb(0, 0, 255);
font-weight: bold;
}
#myCarousel {
width: 400px;
height: 300px;
position: absolute;
top: 450px;
left: 750px;
padding: 10px;
margin: 30px;
z-index: 3;
border: 3px solid #000000;
}
header img {
position: relative;
left: 500px;
}
#nav li {
display: inline;
font-family: 'Merriweather', serif;
}
#nav a {
text-decoration: none;
}
#nav a:link {
display: inline-block;
width: 200px;
color: #5c3205;
border-radius: 8px;
box-shadow: 1px 1px 2px 2px #f26522;
background-color: #e79806;
text-shadow: 3px 2px 3px #aaa;
position: relative;
top: 20px;
left: 5px;
}
#nav a:hover {
color: #ff0000;
}
#nav a:visited {
color: #5c3205;
}
p {
font-size: 18px;
}
h3 {
font-size: 15px;
}
h4 {
font-size: 15px;
font-style: italic;
}
.story1 {
width: 700px;
height: 600px;
position: relative;
left: 50px;
top: 300px;
padding: 5px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 {
width: 450px;
height: 200px;
position: absolute;
right: 700px;
top: 900px;
margin-top: 20px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 li {
margin-bottom: 15px;
font-size: 18px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Course Outline</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Testing.css" type="text/css">
</head>
<body>
<div id="container">
<header>
</header>
<div id="nav">
</div>
<div class="story1">
<h1>Computer Science at Tawa College</h1>
<h2>DITCS101</h2>
<p>In DITCS101 you will learn programming languages such as Python, CSS3, HTML5 and Scratch, you will also learn to use Webflow to design your website without any coding. You will be tested on these programming languages by means of doing various assesments
like using Python to construct a basic computer program for a specified task and using Notepad++ to make a prototype (like a website) to address a brief.
</p>
<h2>DITCS201</h2>
<p>In DITCS201 your knowledge of programming languages like Python, CSS3, HTML5 will be expanded and you will be taught new techniques and features that you will be utilising in various assesments. You will also be taught PHP which is a server-side
scripting language designed for web development and also MYSQL which is the world's second most used relational database management system.
</p>
<h2>DITCS301</h2>
<p>In DITCS301, your knowledge of Python, CSS3, HTML5, PHP and MYSQL will be further expanded for you to use in various assesments as well as learning JQUERY to create animations for websites.
</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/Person1.jpg" alt="Masterchief">
</div>
<div class="item">
<img src="images/Person2.jpg" alt="Tuna pasta bake">
</div>
<div class="item">
<img src="images/Person3.jpg" alt="Chickpea and tomato curry">
</div>
<div class="item">
<img src="images/Person4.jpg" alt="Asian beef and noodle salad">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h2>Bootstrap Carousel Slideshow</h2>
</div>
<div class="story3">
<h2>Course booklets on E2Learn</h2>
<ul>
<li><a href="http://e2learn.school.nz/pluginfile.php/22162/mod_resource/content/0/2016%20-%20DITCS101.pdf">DITCS101 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22163/mod_resource/content/0/2016%20-%20DITCS201.pdf">DITCS201 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22164/mod_resource/content/0/2016%20-%20DITCS301.pdf">DITCS301 2016</a>
</li>
</ul>
</div>
<div id="footer">
<h4>Website logo by Kyle Josef, used under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY</a> /Forward slash,less than sign and shield outline resized. Shield outline colour changed to yellow.
\t \t \t </h4>
</div>
</div>
</body>
</html>