Question

我在页面顶部有一个导航栏，带有一个“用户”元素来显示当前登录信息。

我的目标是使栏的工作方式与您调整大小时Visual Studio的工作方式类似（左侧导航元素开始换行，而右侧登录信息固定在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 1之后声明此自定义样式表。通常，我从不自定义现成的媒体查询。

导航栏包装类似于ASP中的Visual Studio

1 个答案: