Question

我有一个简单的问题。我认为答案对你来说也很容易。我正在使用Bootstrap来访问网站。所有文件都在我的php文件中下载并连接。我有一个容器div与类容器。在它的所有网站foo，如标题，...，将发生。现在我在标题中编写两个span6 div。我想让他们彼此相邻。喜欢它的想法。但他们第二个div显示在第一个div下面。我弄错了什么？

以下是我的文件：的的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>

my 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-File

/* 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;*/
}

当你能帮助我的时候，我会很开心！你的，拉斐尔

Answer 1

它不应该是class="span6"吗？请尝试以下方法：

<div class="row">
    <div id="span6" class="span6" style="background-color:red">
        sahdkad
    </div>
    <div id="span6" class="span6" style="background-color:blue">
        salkjdhsa
    </div>
</div>

Answer 2

使用class而不是id。

<div class="span6">

Bootstrap 2 span6

2 个答案: