0

这里有很多 html，但对于任何拥有引导站点的人来说，它应该看起来非常熟悉。

<body>
<section class="container-fluid">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="/">Home</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">One</a></li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Three</a></li>
                    </ul>
                    <ul class="pull-right nav">
                        <li class="dropdown">
                            <a href="##" class="navbar-link dropdown-toggle" data-toggle="dropdown">
                                Your name here
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="/Profile/Profile.cfm">Profile</a></li>
                                <li><a href="/?logout">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <form>
        <textarea name="Comment"></textarea>
        <div class="form-actions">
            <input type="submit" name="Save" value="Save">
        </div>
    </form>
</section>
</body>

我可以使用这个 css 将“保存”按钮放在屏幕的右上角：

.form-actions {
    position:absolute;
    right:0;
    top:25px;
}

我想做的是给它一个固定顶部的属性。换句话说，这样当用户向下滚动时它不会滚动到屏幕外。

我可以更改 html、css 以及实现此目标所需的任何内容。例如，现在“你的名字在这里”位于导航栏的右侧，但那是一时兴起 - 这不是必需的。

4

1 回答 1

1

我不完全清楚你希望最后一页是什么样子，但这是一个开始吗？
http://jsfiddle.net/panchroma/R5Q3W/

重要的是表单是您想要“窥探”的内容，所以我将它包装在一个包含 div 中，如下所示：

<div class="formWrapper" data-spy="affix" data-offset-top="10">
<form> ...... </form>
</div><!-- close formWrapper div -->

（data-offset-top 是在词缀动作开始之前页面需要滚动的距离）

然后我添加了这个 CSS 来定义你想在这个 div 被贴上时发生什么 

.formWrapper.affix{
right:0;
top:25px;
width:100%;
}

希望这可以帮助！

于 2013-01-11T23:03:24.073 回答