0

bootstrap.cssスタイリングに使用する簡単な Web ページを作成しました。うまくいかないようです。フィールドの左側にラベルを配置し、ラベルの右端を揃えて「水平」レイアウトを指定しましたが、出力はラベルがフィールドの上に積み上げられて表示されます。

HTMLは次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet"
            href="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
    </head>
    <body>
        <h1>Welcome to My Site</h1>
        <form class="form-horizontal" method="post"
            enctype="application/x-www-form-urlencoded"
            action="/auth/page/account/newaccount">
            <fieldset>
                <legend>Register a new account</legend>
                <input type="hidden" name="_token" value="PPMN5nK3IL">
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h2">Username</label>
                    <div class="controls input">
                        <input id="h2" name="f2" type="text" required value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h3">Email</label>
                    <div class="controls input">
                        <input id="h3" name="f3" type="email" required="" value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h4">Password</label>
                    <div class="controls input">
                        <input id="h4" name="f4" type="password" required="" value="">
                    </div>
                </div>
                <div class="control-group clearfix required ">
                    <label class="control-label" for="h5">Confirm</label>
                    <div class="controls input">
                        <input id="h5" name="f5" type="password" required="" value="">
                    </div>
                </div>
                <div class="form-actions">
                    <input class="btn primary btn-large" type="submit"
                        value="Create New Account">
                </div>
            </fieldset>
        </form>
        <script src="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js">
        </script>
        <script src="ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
        </script>
    </body>
</html>
4

1 に答える 1

2

//スタイルシート リンクの一部としてがありません。

に変更します 

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">

下部のスクリプト タグにも同じことが当てはまります。

また、いくつかの機能に依存するため、ファイルのjQuery前にbootstrapファイルを含める必要があることに注意してください。bootstrapjQuery

于 2013-07-08T12:22:01.297 に答える