5

こんにちはStackOverflowコミュニティ、私は特定のページでTwitterブートストラップ2.0.4に基づいてサイトを構築しています。入力にボタンを添付したいと思います。問題は、入力とボタンの間にマージンを置いて表示することです。

私はそれが私が見逃しているものだと確信していますが、それが何であるかを判断することはできませんか？

編集：無効や編集不可などの一部のスタイル-入力がページに正しく適用されていません

編集2：明らかに動作している.disabledおよび.uneditable-input。

JFiddle： http: //jsfiddle.net/sHGtb/

JFiddleフルスクリーンの結果：http：//jsfiddle.net/sHGtb/embedded/result/

何か助け？

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="http://localhost/test/index.php/../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="http://localhost/test/index.php/../css/bootstrap-responsive.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
        <script src="../../js/html5shiv.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://localhost/test/index.php/../js/modernizr.js"></script>
</head>
<body>
    <div class="container">
        <form class="form-horizontal">
            <fieldset>
                <hr/>
                <h4>Puesto</h4>
                <p>Debe estar asignado segun su perfil, solo los administradores pueden cambiar esta opcion; si existiese alguna irregularidad debe solicitar reportelo al administardor.</p>
                <div class="control-group">
                    <label for="puesto" class="control-label">Puesto</label>
                    <div class="controls">
                        <div class="input-append">
                            <input type="text" name="puesto" class="input-xlarge" />
                            <button class="btn" type="button"><i class="icon-search"></i></button>
                        </div>
                    </div>
                </div>
                <hr/>

            </fieldset>
        </form>
    </div>  
    <script language="javascript" type="text/javascript" src="http://localhost/test/index.php/../js/jquery-1.7.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="http://localhost/test/index.php/../js/bootstrap.min.js"></script>
</body>
</html>

問題のスクリーンショット

4

2 に答える 2

18

これは非常に馬鹿げているように聞こえるかもしれませんが、入力とテキストエディタがページをいじっているボタンの間に新しい行を残さないでください:-P

      <div class="control-group">
                <label for="puesto" class="control-label">Puesto</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="text" name="puesto" class="input-xlarge" /><button class="btn" type="button"><i class="icon-search"></i></button>
                    </div>
                </div>
            </div>
于 2012-07-10T16:05:04.790 に答える
0

私があなたを理解しているなら、あなたはボタンと入力フィールドの間のマージンを排除したいですか？あなたはこのようなことを試すことができます...

<input type="text" name="puesto" class="input-xlarge" style="margin-right:0;"/>
<button class="btn" type="button" style="margin-left:0;"><i class="icon-search"></i></button>

そのスタイリングが機能しない場合は、要素にさらにcssスタイリングを試してみてください。

于 2012-07-06T18:34:51.077 に答える