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 に答える