Fatal编程技术网
  • css/
  • Css 引导分区/行的位置不正确

Css 引导分区/行的位置不正确

css twitter-bootstrap html

Css 引导分区/行的位置不正确,css,twitter-bootstrap,html,Css,Twitter Bootstrap,Html,我是相当新的引导，但我试图创建一个基本的网站。我的索引中有以下代码： <!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-w

我是相当新的引导，但我试图创建一个基本的网站。我的索引中有以下代码：

<!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">&copy; 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>


为你播放最新的热门歌曲！
.holderjs流体{字体大小：16px；字体重量：粗体；文本对齐：居中；字体系列：无衬线；边距：0}
var bustcachevar=1//bust初始请求后外部页面的潜在缓存？（1=是，0=否）
var loadeobjects=“”
var rootdomain=“http://”+window.location.hostname
var bustcacheparameter=“”
函数ajaxpage（url，容器ID）{
var page_请求=false
if（window.XMLHttpRequest）//if Mozilla、Safari等
page_request=newXMLHttpRequest（）
else if（window.ActiveXObject）{//if IE
试一试{
page_request=newActiveXObject（“Msxml2.XMLHTTP”）
} 
捕获（e）{
试一试{
page_request=newActiveXObject（“Microsoft.XMLHTTP”）
}
捕获（e）{}
}
}
其他的
返回错误
page_request.onreadystatechange=函数（）{
loadpage（请求页，集装箱ID）
}
if（bustcachevar）//外部页面的if-bust缓存
bustcacheparameter=（url.indexOf（“？”）=-1）？“&”+新日期（）.getTime（）：“？”+新日期（）.getTime（）
页面请求。打开（'GET'，url+bustcacheparameter，true）
页面_请求发送（空）
}
函数加载页（请求页，容器ID）{
if（page_request.readyState==4&&（page_request.status==200 | window.location.href.indexOf（“http”）==1））
document.getElementById（containerid）.innerHTML=page\u request.responseText
}
函数loadobjs（）{
如果（！document.getElementById）
返回
对于（i=0；i

    

  • 

  • 

  • 

  • 

  • 




    

  • 


小组标题
奥雷姆·伊普斯姆·多洛·希特·阿梅特是一位杰出的建筑大师，他是一位杰出的建筑大师，他是一位杰出的建筑大师
权杖酒后驾车，以利奥·莱克图斯·奎斯酒后驾车为绰号。酒后驾车的精英在拉库斯·波特托，ultrices ultrices ligula porttitor。Praesent faucibus ullamcorper ligula ut
cursus.Vivamus调味品augue vel dapibus feugiat.在tortor iaculis，在suscipit的Nallales Nullas.Pellentsque commodo venenatis mauris，
在《浮士德》一书中，侵权人的权利、权利和义务在《浮士德》一书中得到了充分的体现。在《浮士德》一书中，侵权人的权利、权利和义务都得到了体现。
佩伦茨克葡萄酒，无欧盟甜味调味品，奥古斯特·安特·波苏尔·努克，在laoreet velit est ac ipsum。精英万岁，佩伦茨克欧盟只是一个，
在前庭肺门的直径和宽度的肺动脉中有一个小的肺动脉。肺静脉悬液是一种调味品。
空id pharetra侵权人。



无线电统计
这里是静态代码。
快速请求
请求行代码在这里。
脸谱网
这里是Facebook代码。
&副本；BoonRadio 2013
不要介意隐藏的ajax代码。无论如何，我的部门正在这样做：

我在主内容框中添加的内容越多，右侧的3个分区就越向下。我希望它们保持不变，这样当我添加更多内容时，它们就不会向下移动。即使将页边空白顶部添加到col-sm-4分区，它们也会向下移动

它可能很简单，我只是没有正确地思考，但有人能帮我吗？

你误解了Bootstrap的网格系统是如何工作的。去掉列div上的浮点样式，它应该可以工作；Bootstrap已经提供了正确的浮点样式作为网格系统的一部分。另外，你的导航标题。另外，整理你的缩进，它现在非常不一致，这使得它更难阅读和理解。

我纠正了你的缩进。有一些不必要的结束标记。正如Nathan所说，引导不需要浮动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">&copy; BoonRadio 2013</div>
</div>


小组标题
乱数假文。。。
无线电统计
这里是静态代码。