0
我有一個簡單的問題。我認爲答案對你來說也很簡單。 我正在使用Bootstrap作爲網站。所有的文件都下載並連接在我的PHP文件。 我有一個類容器的容器div。其中所有的網站foo，如標題，...都會發生。 現在我在頭中編碼兩個span6 div。我想讓他們緊挨着。就像它被認爲。 但他們第二個div顯示在第一個div下面。 我在做什麼錯了？Bootstrap 2 span6
這裏是我的文件： 的index.php
<!doctype html>
<!-- Developer: Raphael Klein - http://austrianmultimedia.at/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="<?php echo $sitePath; ?>">
<meta name="author" content="<?php echo $author; ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="apple-touch-icon" href="">
<script src="js/jquery-1.10.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<!-- my CSS -->
<link rel="stylesheet" href="css/doktorhaiden.css">
</head>
<body>
<div id="container" class="row, container">
<header>
<?php include("header.php"); ?>
</header>
<div class="row">
<div id="left" class="span4">
<div class="element" id="navLeft">
<ul>
<li><h1><a href="">Home</a></h1></li>
<li><h1>Über uns</h1></li>
<li><h1>Kontakt</h1></li>
</ul>
</div> <!-- element -->
</div> <!-- left -->
<div id="right" class="span8">
<div id="home" class="element">
<h1><hr width="100px">Willkommen<hr width="200px"></h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
<img class="thumbnail" src="graphics/placeholder.png">
</div> <!-- home -->
<div id="ueberuns" class="element">
<h1><hr width="100px">Über uns<hr width="300px"></h1>
<div class="span4">
<h2>Dr. (med) Katharina Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
<div class="span4">
<h2>Dr. (med) Elmar Haiden</h2>
<img class="thumbnailHoch" src="graphics/placeholderHoch.png">
</div>
</div> <!-- ueber uns -->
</div> <!-- right -->
</div>
</div> <!-- container -->
</body>
</html>
我的header.php
<div class="row">
<div id="span6" style="background-color:red">
sahdkad
</div>
<div id="span6" style="background-color:blue">
salkjdhsa
</div>
</div>
，最後我的CSS-文件
/* Developer: Raphael Klein - http://austrianmultimedia.at/ */
/* @group undo defaults margins and paddings */
/* INIT */
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, , span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ------------------------------------- @end INIT */
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 0px;
}
.row {
margin-left: 0px;
*zoom: 1;
}
#container {
}
body {
background-color: #fff;
font-family: 'Raleway', sans-serif;
line-height: 21px;
}
header {
height: 100px;
}
#left {
background-color: #3F3F3F;
text-align: right;
}
#right {
margin-left: 10px;
}
#left h1 {
color:#5AD1E5;
font-size: 2em;
line-height: 0.7em;
}
#right h1 {
font-size: 2em;
}
#right h2 {
font-size: 1em;
color: #CC9E44;
}
#right h1 hr {
display: inline-block;
top: 12px;
left: 10px;
position: relative;
border: 0;
border-top: 2px solid #5AD1E5;
margin-right: 20px;
}
.element {
padding:10px 10px 10px 10px;
}
#navLeft {
margin:0px 10px 20px 0px;
}
/* Seitenbereiche */
#home {
/*background-color: #FFCE00;*/
}
/* Images */
.thumbnail, .thumbnailHoch {
border: 1px solid #5AD1E5;
padding: 10px 10px 10px 10px;
}
.thumbnail {
width: 350px;
}
.thumbnailHoch {
height: 200px;
}
hr {
/*height: 24px;
background: url('flourish.png')
no-repeat 50% 50%;
margin: 3em 0;
border: 0;*/
}
我會很高興，當你能幫助我！ Yours，Raphael
另外一點要記住的是，你不希望有相同'id's多個元素。您應該始終爲'html'中的每個元素和每個元素設置唯一的'id'。 – vee