我是一个相当新的bootstrap，但我正在尝试创建一个基本的网站。我的索引中有以下代码：
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="http://getbootstrap.com/assets/ico/favicon.png">
<title>BoonRadio: Playing the latest hits for you!</title>
<!-- Bootstrap core CSS -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap theme -->
<link href="../bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://../bootstrap/css/theme.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css"></style><style id="holderjs-style" type="text/css">.holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}</style><style type="text/css"></style></head>
<script type="text/javascript">
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
</script>
<body style="">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">BoonRadio</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="#">Our DJ's</a></li>
<li><a href="#">Apply for DJ</a></li>
<li><a href="#">Timetable</a></li>
<li><a href="#">About</a></li>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Sign In</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8" style="float: left;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam iaculis tincidunt nunc eu iaculis. Curabitur aliquam, purus volutpat tincidunt fermentum, augue erat
scelerisque dui, at aliquet leo lectus quis dui. Nulla congue elit in lacus porttitor, ultricies ultrices ligula porttitor. Praesent faucibus ullamcorper ligula ut
cursus. Vivamus condimentum augue vel dapibus feugiat. Proin vulputate massa at tortor iaculis, in sodales nulla suscipit. Pellentesque commodo venenatis mauris,
vitae feugiat tortor cursus non. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc quam nisi, semper non tortor vel, tincidunt eleifend dui.
Curabitur pellentesque, nulla eu blandit condimentum, augue ante posuere nunc, at laoreet velit est ac ipsum. Vivamus neque elit, pellentesque eu justo a,
iaculis lacinia leo. Sed pulvinar dapibus diam et vulputate. In porta sem id lorem vestibulum pulvinar. Suspendisse luctus lorem sit amet condimentum volutpat.
Nullam id pharetra tortor.
<br /><br />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" style="float: right;">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap/js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/holder.js"></script>
</body></html>
不介意隐藏的ajax代码。无论如何，我的div正在这样做：
http://i.imgur.com/HdjKFfS.png
我在主要内容框中添加的内容越多，右边的3个div就会向下移动。我希望他们留在原地，所以当我添加更多内容时，他们不会向下移动。即使向col-sm-4 div添加margin-top，它们仍会向下移动。
http://i.imgur.com/aSs1GqP.png
这可能很简单，我只是没有正确思考，但有人会帮助我吗？
答案 0 :(得分：0)
你误解了Bootstrap的网格系统是如何工作的。摆脱列div上的浮动样式，它应该工作; Bootstrap已经提供了正确的浮动样式作为网格系统的一部分。您的导航标题中也有一个迷路</li>。另外，让你的缩进整理出来，现在它非常不一致，这使得它更难以阅读，更难以弄明白。
答案 1 :(得分：0)
我纠正了你的缩进。有些关闭</div>标签是不必要的。正如Nathan所说，Bootstrap不需要浮动css。
<div class="container">
<img src="../img/banner.png" />
<div class="page-header"></div>
<div class="row">
<div class="col-sm-8">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Lorem ipsum ...
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Radio Statistics</h3>
</div>
<div class="panel-body">
Statics code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Quick Requests</h3>
</div>
<div class="panel-body">
Request line code here.
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Facebook</h3>
</div>
<div class="panel-body">
Facebook code here.
</div>
</div>
</div><!-- /.col-sm-4 -->
</div>
<!-- <script type="text/javascript">
ajaxpage('#', 'contentarea')
</script>
<div id="contentarea"></div> -->
<div class="page-header"></div>
<div class="footer">© BoonRadio 2013</div>
</div>