我在页面顶部有一个导航栏,带有一个“用户”元素来显示当前登录信息。
我的目标是使栏的工作方式与您调整大小时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;
}
答案 0 :(得分: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之后声明此自定义样式表。通常,我从不自定义现成的媒体查询。