个人中心
gpt4 book ai didi

css - Bootstrap 3 网格系统将导航栏菜单与页面内容对齐并设置页面内容大小

转载 作者：行者123 更新时间：2023-11-28 07:25:44 25 4
gpt4 key购买 nike

我在将 navbarmenu 与 pagecontent 对齐时遇到了一点问题，因此它非常适合 herizonal。现在它看起来像这张图片:

enter image description here

如您所见，我希望页面内容为 950 像素(空白)，外面的灰色是整体背景色。我只尝试创建全尺寸页面，所以这是正确的方法吗，宽度:950px;？还是有更聪明的方法来强制所有页面全屏显示 950 像素？

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

enter image description here

您可以在以下位置查看全尺寸页面:This page

如您所见导航栏菜单适合并与页面内容对齐，即使您尝试调整它的大小也是如此。

代码(_Layout):

 <body>
<div class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="row">
            <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>
            </div>
        </div>


    <div class="row">
        <div class="navbarunder">
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>
        </div>
    </div>
</div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>

CSS 文件:

 .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;
}

希望有人能告诉我应该看什么，因为我已经尝试了我所知道的一切..

最佳答案

我相信导航 div 上的 container-fluid 是罪魁祸首，正如对 Container-fluid vs .container 的接受答案中所讨论的那样

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

关于css - Bootstrap 3 网格系统将导航栏菜单与页面内容对齐并设置页面内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31835542/

25 4 0
文章推荐： javascript - JQuery 可拖动元素在 droppable.append(draggable) 上消失在 droppable 中
文章推荐： javascript - 更改单独元素中的 javascript 变量
文章推荐： ios - 从背景进入前景时 SVProgressHUD 没有动画
文章推荐： c++ - Bad_alloc 声明数组时，似乎内存不够