5

Bootstrapには次のCSSがあります。

.form-horizontal .control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 180px;
  *margin-left: 0;
}

これにより、私のフォームは次のようになります。

ここに画像の説明を入力してください

ラベルはかなり右側にあります。

フォームの作成方法は次のとおりです。

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="kez_header">


        <table class="style1">
           <tr>
               <td>
                   <h4> Add Group
                   </h4>
              </td>
               <td align="right" valign="middle">

               </td>
           </tr>
           </table>

             <div id="new_group_view" class="form-horizontal">
             <form class="form-horizontal" method="POST" action="/yourownpoet/web/app_dev.php/register/">
    <div class="control-group">
        <label class="control-label control-label-me required" for="fos_user_registration_form_email" placeholder="Email">Email:</label>
        <div class="controls">
            <input id="fos_user_registration_form_email" class="text-style" type="email" placeholder="Email" required="required" name="fos_user_registration_form[email]">
            <div placeholder="Password" id="fos_user_registration_form_plainPassword"></div>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label required" for="fos_user_registration_form_plainPassword_Enter Password: ">Enter password: </label>
        <div class="controls">
            <input type="password" required="required" name="fos_user_registration_form[plainPassword][Enter Password: ]" id="fos_user_registration_form_plainPassword_Enter Password: " class="text-style">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label required" for="fos_user_registration_form_plainPassword_Verify Password: ">Verify password: </label>
        <div class="controls">
            <input type="password" required="required" name="fos_user_registration_form[plainPassword][Verify Password: ]" id="fos_user_registration_form_plainPassword_Verify Password: " class="text-style">
        </div>
    </div>
</form>
             </div>
    </div>
</asp:Content>

ラベルが次のように始まるように、これを正常にするにはどうすればよいですか：http: //bootstrap.stage42.net/doc/forms

ありがとう

4

1 に答える 1

7

.form-horizontal .control-label width「親コンテナーの左側からラベル テキストの最後の文字までの距離」を指定します。

.form-horizontal .controls margin-left「親コンテナの左側からフィールドの左端までの距離」を指定します。

これは簡単な説明ですが、スタイルを制御するのに十分な理解が得られるはずです。

そのため、コンテナー内のフィールドとラベルを移動するには.form-horizontal .control-label width、値を比例的に調整する必要があります。.form-horizontal .controls margin-leftラベルとフィールドの間の「スペース」を保持する必要があるため、比例します。次に例を示します。

.form-horizontal .control-label {
  float: left;
  width: 120px; /* changed from 160px to 120px */
  padding-top: 5px;
  text-align: right;
}

.form-horizontal .controls {
  *display: inline-block;
  *padding-left: 20px;
  margin-left: 140px;  /* changed from 180px to 140px */
  *margin-left: 0;
}
于 2013-02-06T09:56:27.927 に答える