Bootstrap 3网格系统将导航栏菜单与pagecontent&设置pagecotent大小

时间:2015-08-05 14:34:51

标签: css asp.net twitter-bootstrap

我在将navbarmenu与pagecontent对齐方面遇到了一些问题,因此它非常适合herizonal完美。现在它看起来像这张图片:

enter image description here

正如您所看到的,我希望页面内容为950px(空白区域),灰色外部是整体背景色。我只尝试创建fullsize页面,所以这是正确的方法,宽度:950px;?或者是否有一种更智能的方法可以在全屏显示所有页面时将其强制为950px?

我想做的是让它看起来像这个页面(布局):

enter image description here

您可以在This page

看到完整尺寸页面

正如您所见,navbarmenu适合并与页面内容对齐,即使您尝试调整其大小。

代码(_Layout):

 .indexpage {
background-color: white;    
height: 500px;
margin-left:auto;
margin-right:auto;
}

 @media (min-width: 1000px) {
.indexpage {
    width: 950px;
}
}

 .navbar-inverse {
background-color: white;
border-width: 0px;
border-bottom: thin solid #95a5a6;

}

.navbarunder {
font-variant: small-caps;
border-top: thick solid #003665;
border-width: 8px;
}

CSS文件:

<form id="form2" method="post" action="ajax-Upload.php" class="importModal" enctype="multipart/form-data">
    Upload Excel File : <input type="file" name="xlsFile" id="xlsFile" />
    <input type="submit" id="addType" name="addType" value="Submit" />
</form>

希望有人可以告诉我应该注意什么,因为我已经尝试了我所知道的一切......

1 个答案:

答案 0 :(得分:0)

我相信导航$('#html-go').click(function (e) { e.preventDefault(); var html_code = $('#html-code').val(); console.log(html_code); obj = $('<div/>').html(html_code).contents(); alert($(html_code).attr('action')); }); 上的container-fluid是罪魁祸首,正如Container-fluid vs .container

的公认答案中所讨论的那样

您可能需要考虑使用其中一个Bootstrap示例,例如Sticky Footer Navbar。查看该页面上的源代码,您可以获取所需的部分,并开始调整该HTML以满足您的需求。