1
我正在一個簡單的html頁面上工作，充分利用引導列，並且我正在運行最奇怪的問題。列正在消失在我身上。或者至少當我看着螢火蟲不在他們應該在的地方。我希望有人知道我正在犯的愚蠢的錯誤，或者我可能qu qu的怪癖。Bootstrap 3列不會停留/消失
這裏是我的嵌入式CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<title> test </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* define the headers for each section */
h1 {
margin: auto;
padding-top: 10%;
padding-bottom: 5%;
text-decoration: underline;
} h1:before {
content: "\00a0\00a0";
} h1:after {
content: "\00a0\00a0";
} span {
color: #111;
text-decoration: none;
z-index: 1;
}
/* Define the Nav Bar */
.navbar {
padding-top: 5px;
padding-bottom: 5px;
background-color: #9fc;
width: 100%;
border: solid;
border-bottom-width: 2px;
border-color: white;
} li:hover {
background-color: #7da;
}.dropbtn { /* Dropdown Button */
padding: 16px;
border: none;
cursor: pointer;
} .dropdown { /* The container <div> - needed to position the dropdown content */
position: relative;
display: inline-block;
} .dropdown-content { /* Dropdown Content (Hidden by Default) */
display: none;
position: absolute;
background-color: #9fc;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border: solid;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-color: white;
z-index: 1;
} .dropdown-content a { /* Links inside the dropdown */
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border: solid;
border-bottom-width: 1px;
border-color: white;
} .dropdown-content a:hover { /* Change color of dropdown links on hover */
background-color: #f1f1f1
} .dropdown:hover .dropdown-content { /* Show the dropdown menu on hover */
display: block;
}
/* Home section of the page */
.bg-head {
min-height: 100vh;
background-image: url(bgtest.jpg);
overflow: auto;
} .bg-head img {
padding-top: 15vh;
padding-bottom: 10px;
} .bg-head p {
background-color: white;
opacity: 0.8;
padding: 10px;
} .bg-head .center {
margin: auto;
}
/* Define the Section type 1 */
.bg-1 {
min-height: 100vh;
background-color: #39f;
color: #222;
overflow: auto;
} .bg-1 h1 { /* Underline color */
color: #fff;
} .bg-1 span { /* header text color */
color: #222;
} .bg-1 img {
padding: 5px;
}
/* Define the Section type 2 */
.bg-2 {
min-height: 100vh;
background-color: #222;
color: #eee;
overflow: auto;
} .bg-2 h1 { /* Underline color */
color: #39f;
} .bg-2 span { /* header text color */
color: #eee;
}
/* Define the Section type 3 */
.bg-3 {
min-height: 100vh;
background-color: #fff;
overflow: auto;
color: #222;
} .bg-3 h1 { /* Underline color */
color: #39f;
} .bg-3 span { /* header text color */
color: #222;
} .bg-3 iframe {
height: auto;
width: auto;
padding: 10px;
margin: auto;
}
.bg-footer {
background-color: #444;
color: #fff;
height: 5em;
padding-top: 2em;
font-size: 1em;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Interests">Interests and Specialities</a></li>
<li><a href="#Insurance">Insurance</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Resources">Resources</a></li>
</ul>
</div>
</div>
</nav>
<!-- First Container -->
<div id="Home" class="container-fluid bg-head">
<row>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<img src="test1.png" class="img-responsive img-circle margin center" style="display:inline" alt="Parish Counseling Service" width="350" height="350"/>
</div>
<div class="col-sm-4"> </div>
</row>
<row>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<p>
Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
you can just rub onto your skin? You'd think it would be something
you'd have to freebase. Well, then good news! It's a suppository.
Okay, it's 500 dollars, you have no choice of carrier, the battery
can't hold the charge and the reception isn't very…
Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
you can just rub onto your skin? You'd think it would be something
you'd have to freebase. Well, then good news! It's a suppository.
Okay, it's 500 dollars, you have no choice of carrier, the battery
can't hold the charge and the reception isn't very…
</p>
</div>
<div class="col-sm-2"> </div>
</row>
</div>
<!-- Second Container -->
<div id="About" class="container-fluid bg-1">
<row class="text-center">
<div class="col-sm-1"></div>
<div class="col-sm-10"><h1><span>About Me<span></h1></div>
<div class="col-sm-1"></div>
</row>
<row>
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img src="test2.png" class="img-responsive margin" align="left" alt="Greg" width="200" height="200">
<p>
Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
you can just rub onto your skin? You'd think it would be something
you'd have to freebase. Well, then good news! It's a suppository.
Okay, it's 500 dollars, you have no choice of carrier, the battery
can't hold the charge and the reception isn't very…
Fry! Quit doing the right thing, you jerk! Wow! A superpowers drug
you can just rub onto your skin? You'd think it would be something
you'd have to freebase. Well, then good news! It's a suppository.
Okay, it's 500 dollars, you have no choice of carrier, the battery
can't hold the charge and the reception isn't very…
</p>
</div>
<div class="col-sm-3"></div>
</row>
</div>
<!-- Third Container (Grid) -->
<div id="Interests" class="container-fluid bg-2">
<row class="text-center">
<div class="col-sm-1"></div>
<div class="col-sm-10"><h1><span>Areas of interests and specializations<span></h1></div>
<div class="col-sm-1"></div>
</row>
<row>
<div class="col-sm-2"></div>
<div class="col-sm-4">
<ul>
<li>Daddy Bender, we're hungry.</li>
<li>There's one way and only one way to determine if an animal is intelligent.</li>
<li>Dissect its brain!</li>
<li>You mean while I'm sleeping in it?</li>
<li>Who am I making this out to?</li>
<li>We can't compete with Mom!</li>
<li>Her company is big and evil!</li>
<li>Ours is small and neutral!</li>
</ul>
</div>
<div class="col-sm-4">
<ul>
<li>Daddy Bender, we're hungry.</li>
<li>There's one way and only one way to determine if an animal is intelligent.</li>
<li>Dissect its brain!</li>
<li>You mean while I'm sleeping in it?</li>
<li>Who am I making this out to?</li>
<li>We can't compete with Mom!</li>
<li>Her company is big and evil!</li>
<li>Ours is small and neutral!</li>
</ul>
</div>
<div class="col-sm-2"></div>
</row>
</div>
<!-- Forth Container (Grid) -->
<div id="Insurance" class="container-fluid bg-1">
<row class="text-center">
<div class="col-sm-2"></div>
<div class="col-sm-8"><h1><span>Accepting fees and Insurance<span></h1></div>
<div class="col-sm-2"></div>
</row>
<row>
<div class="col-sm-3"></div>
<div class="col-sm-6">
<p>
Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat. Oh Leela! You're the only person I could turn to; you're the only person who ever loved me.
Anyone who laughs is a communist! There's no part of that sentence I didn't like! Tell them I hate them. Bite my shiny metal ass. So I really am important? How I feel when I'm drunk is correct.
I found what I need. And it's not friends, it's things. Kids don't turn rotten just from watching TV. Kif, I have mated with a woman. Inform the men. Yes, except the Dave Matthews Band doesn't rock. Tell her she looks thin.
</p>
<p>
option1 <br>
option1 <br>
option1 <br>
option1 <br>
</p>
</div>
<div class="col-sm-3"></div>
</row>
</div>
<!-- Fifth Container (Grid) -->
<div id="Contact" class="container-fluid bg-3">
<row class="text-center">
<div class="col-sm-2"></div>
<div class="col-sm-8"><h1><span>Location and Contact Information<span></h1></div>
<div class="col-sm-2"></div>
</row>
<row>
<div class="col-sm-2"> <span> </span> </div>
<div class="col-sm-8">
<row>
<div class="col-sm-6"> <!-- Contact Email -->
Bender?! You stole the atom.<br>
You lived before you met me?! <br><br>
We're also Santa Claus! <br>
I had more, but you go ahead. <br><br>
Professor, make a woman out of me.<br>
</div>
<div class="col-sm-6"> <!-- Embeded Map -->
<iframe
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBV0yLhoKn-BsyktBdZpla1VKfOCikqzgQ&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
</div>
</row>
<row>
<form>
<div class="col-sm-4"> <!-- Name, Email, Subject -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject">
</div>
</div>
<div class="col-sm-8"> <!-- Message, Send -->
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Message" width="100%"></textarea>
</div>
<div class="form-group">
<button width="100%" type="submit" class="btn btn-default" >Send</button>
</div>
</div>
</form>
</row>
</div>
<div class="col-sm-2"><span> </span></div>
</row>
</div>
<!-- Sixth Container (Grid) -->
<div id="Resources" class="container-fluid bg-1 text-center">
<row>
<div class="col-sm-2"></div>
<div class="col-sm-8"><h1><span>Resources<span></h1></div>
<div class="col-sm-2"></div>
</row>
<row>
<div class="col-sm-12">
Bender, hurry! This fuel's expensive! <br>
Also, we're dying! Soon enough. <br><br>
You lived before you met me?! <br><br>
Bender, hurry! This fuel's expensive! <br>
Also, we're dying! Fry! <br><br>
Stay back! He's too powerful! <br>
I guess if you want children beaten, you have to do it yourself.<br><br>
Bender, hurry! This fuel's expensive! <br>
Also, we're dying! Soon enough. <br><br>
You lived before you met me?! <br><br>
Bender, hurry! This fuel's expensive! <br>
Also, we're dying! Fry! <br><br>
</div>
</row>
</div>
<footer class="container-fluid bg-footer text-center">
No Worries
</footer>
</body>
</html>我用未來世界的東西拿到了假材料。這是我所看到的：
雙方應該有大小2列居中他們 BG-頭 
BG-3 
媽那是一個非常愚蠢的錯誤......不知道爲什麼，它正在爲一些東西而不是別人？但是完全有道理。 – river226