asp 中类似于 visual studio 的导航栏换行

Question

我的页面顶部有一个导航栏，其中有一个 "user" 元素来显示当前登录。

我的目标是让栏在您调整大小时像 visual studio 一样工作（左侧导航元素开始换行，而右侧登录信息保持固定在右上角）。

我目前拥有的可以做到 99%。缺少的 1% 是左侧元素在到达 window 右侧时换行（它们忽略了用户元素）。

<div id="header_nav_buttons"> 
  <ul>
      <li><asp:HyperLink Text="Link1"/></li>
      <li><asp:HyperLink Text="Link2"/></li>
      <li class="header_session"></li>
  </ul>
</div>

#header_nav_buttons
{
    float: left;
    width: 100%;

    height: auto;
    line-height: 30px;
}

#header_nav_buttons ul
{
    display: inline;
    list-style: none;
    margin: 0px;
    width: 80%;
}

#header_nav_buttons li
{
    display: inline-flex;
    padding-right: 13px;

}

.header_session
{
    float:right;
    padding-right:40px;
    position: absolute;
    right: 0;
    top: 8px;
}

Answer 1

这是您正在寻找的典型 RWD (Responsive Web Design) 行为。您需要在 VS 中启动一个新项目，Bootstrap 应该作为其中的一部分包含在内。你应该坚持使用 Bootstrap 的版本 3，因为我不确定 VS 是否已经赶上版本 4。您确实需要更好地标记您的问题，以显示您使用的 ASP.NET 版本和 VS 版本。

现在您在 CSS 中使用固定的测量单位 - RWD 都是百分比，因为一切都在延伸。您可以使用 Nuget 包管理器将 Bootstrap 引入您的项目，但您的问题对我来说太模糊了，无法为您指明具体方向。尝试从好的 tutorial or two.

开始

更新：

在项目中创建新样式时，请保持原始 Bootstrap.css 文件不变。如果需要，创建一个新的 style.css 样式 sheet 并覆盖其中的任何基本 bootstrap 样式；例如，您可能希望您的按钮看起来不同，等等。确保在母版页中的 Bootstrap 之后声明此自定义样式 sheet。通常，我从不自定义开箱即用的媒体查询。

asp 中类似于 visual studio 的导航栏换行

Navigation bar wrap similar to visual studios in asp

asp.net

visual-studio-2013