Question

从昨天开始，我试图为我的网站设计一个特定的固定标题。

我是bootstrap的初学者，但我知道如何使用bootstrap在屏幕顶部设计固定标头。但是我想知道使用切换选项的设计标题，它应该与以下网站标题类似：

https://www.sitepoint.com/community/t/horizontal-subnavigation-in-bootstrap-3/225086

在上面提到的网站中，他们在右上角使用了切换选项，当我们点击它时，它会在垂直列表中显示项目，但我希望它在一个水平列表中。我的设计应该

截图：

enter image description here

Answer 1

最后，我能够完成设计部分。以下代码适用于我：

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topmenu">
        <div class="container-fluid">
            <div class="navbar-header">
                <img src="~/Content/img/logo.png" style="padding-top:6px" class="pull-left" />

                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" data-toggle="collapse" data-target="#one">Menu1</a>
                    </li>
                    <li>@Html.ActionLink("Menu2", "Index", "Home")</li>
                    <li>@Html.ActionLink("Menu3", "Index", "Home")</li>
                    <li>@Html.ActionLink("Menu4", "Index", "Home")</li>
                </ul>
            </div>
        </div>

        <div class="panel navbar-inverse" id="submenu">
            <ul class="nav navbar-nav collapse" id="one">
                <li>@Html.ActionLink("Submenu1", "Submenu1", "Submenu1Controller")</li>
                <li>@Html.ActionLink("Submenu2", "Submenu2", "Submenu2Controller")</li>
                <li>@Html.ActionLink("Submenu3", "Submenu3", "Submenu3Controller")</li>
                <li>@Html.ActionLink("Submenu4", "Submenu4", "Submenu4Controller")</li>
                <li>@Html.ActionLink("Submenu5", "Index", "Home")</li>
            </ul>
        </div>

    </nav>


    <div class="container-fluid body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My Website</p>
        </footer>
    </div>
</body>

slight adjustments to the .panel css in bootstrap.css file to make

.panel {
  margin-bottom: 0px; 
  background-color: #fff;
  border: .5px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

我已将保证金底部从20px更改为0px，从1px将边界更改为.5px

BootStrap带有切换按钮的固定标题

1 个答案: