导航栏包装类似于asp中的视觉工作室

Question

我的页面顶部有一个导航栏，其中包含“user”元素以显示当前登录信息。

我的目标是调整视觉工作室在调整大小时的工作方式（左侧导航元素开始包装，而右侧登录信息固定在TOP RIGHT角落）。

我目前拥有99％的成就。丢失的1％是左侧元素在它们到达窗口右侧时所包裹的（它们忽略了用户元素）。

<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或two开始。

更新：

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