Question

这里有很多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，实现此目标所需的一切。例如，现在“你的名字在这里”位于导航栏的右侧，但这是一时兴起 - 这不是一个要求。

Answer 1

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

重要的一点是，你想要'spy'on的形式，所以我把它包装在一个像这样的包含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%;
}

希望这有帮助！

如何将第二个项目放入导航栏

1 个答案: