网站布局在jsfiddle和云9的浏览器之间有所不同

Question

我正在使用Cloud 9 IDE开发网站。

但网站布局不同。

提供了代码段

当我在Cloud 9中使用内置浏览器时，我正在获取堆栈片段中显示的html页面。但是，当我最大化它（云9浏览器）并在firefox中看到它时，我会得到不同的布局

菜单位于图片的顶部。

我不确定，为什么会这样。

然而问题是，我如何确定网站布局是否相同，无论是使用堆栈片段，云端9的内置浏览器还是我在我的Firefox中最大化Cloud 9的浏览器。

如果您需要其他信息，请与我们联系。

＆＃13;

＆＃13;

.headerSection{
    background-color: #FECB6E;
	margin-bottom:1px;
	margin-top:1px;
}

#active{
    border-top: thin solid gray;
    border-left: thin solid gray;
    border-right: thin solid gray;
    background:#E6E6E6;
}

.jumbotron {
  background-image:url('http://img11.deviantart.net/3e48/i/2010/044/2/8/programming_oop_wallpaper_red_by_hexeno.png');
  width:100%;
  height:250px;
}

#footnote #wormHole {    
     padding-top:0;
     overflow:hidden;
     width:100%;
     height:20%;
     color:#000;
	 transform: translateY(-50%);
     text-align:center;
     z-index:1;
     opacity: 1.0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="headerSection">
		<div class="col-md-4">
			<ul class="nav nav-pills">
	    		<li><a href="#">About Us</a></li>
	    		<li><a href="https://knowledge-portal-tusharsaurabh.c9.io/select.php" target="_blank">Programming</a></li>
	    	</ul>
	    </div>
	    <div class="col-md-4">
	    </div>
	    <div class="col-md-4">
	    	<ul class="nav nav-pills pull-right">
	    		<li><a href="https://knowledge-portal-tusharsaurabh.c9.io/submitalink.php" target="_blank">Submit A Link</a></li>
	    		<li id='active'><a href="https://knowledge-portal-tusharsaurabh.c9.io/generalfeedback.php" target="_blank">Feedback</a></li>
	    	</ul>	
	    </div>
	</div>
	<div class="jumbotron">
		<div class="container">
        	<h1 id="wormHole">WORMHOLE.</h1>
        	<p id="footnote">Web portal to Programming.</p>
      	</div>
	</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你所看到的被称为响应性，并且是Bootstrap的可怕的东西主要特征之一。
在这种情况下，以下选择器会导致导航栏更改：

@media (min-width: 992px)
{
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12
    {
        float:left;
    }
}

如果您不想要，可以在CSS中添加.col-md-4{float:none !important}：

＆＃13;

＆＃13;

.col-md-4{
    float:none !important;
}

.headerSection{
    background-color: #FECB6E;
	margin-bottom:1px;
	margin-top:1px;
}

#active{
    border-top: thin solid gray;
    border-left: thin solid gray;
    border-right: thin solid gray;
    background:#E6E6E6;
}

.jumbotron {
  background-image:url('http://img11.deviantart.net/3e48/i/2010/044/2/8/programming_oop_wallpaper_red_by_hexeno.png');
  width:100%;
  height:250px;
}

#footnote #wormHole {    
     padding-top:0;
     overflow:hidden;
     width:100%;
     height:20%;
     color:#000;
	 transform: translateY(-50%);
     text-align:center;
     z-index:1;
     opacity: 1.0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="headerSection">
		<div class="col-md-4">
			<ul class="nav nav-pills">
	    		<li><a href="#">About Us</a></li>
	    		<li><a href="https://knowledge-portal-tusharsaurabh.c9.io/select.php" target="_blank">Programming</a></li>
	    	</ul>
	    </div>
	    <div class="col-md-4">
	    </div>
	    <div class="col-md-4">
	    	<ul class="nav nav-pills pull-right">
	    		<li><a href="https://knowledge-portal-tusharsaurabh.c9.io/submitalink.php" target="_blank">Submit A Link</a></li>
	    		<li id='active'><a href="https://knowledge-portal-tusharsaurabh.c9.io/generalfeedback.php" target="_blank">Feedback</a></li>
	    	</ul>	
	    </div>
	</div>
	<div class="jumbotron">
		<div class="container">
        	<h1 id="wormHole">WORMHOLE.</h1>
        	<p id="footnote">Web portal to Programming.</p>
      	</div>
	</div>

＆＃13;

＆＃13;

＆＃13;