登錄表單的大小過大

Question

我的登錄表單太寬了，佔用了頁面寬度的80％，如下圖所示。 我使用默認bootstrap.min.css

繼承人的HTML代碼，我使用

<div class="modal-body"> 
       <h3>Login with your CZCNR account!</h3> 
       <form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf"> 

        <div class="af-outer af-required"> 
         <div class="form-group af-inner"> 
          <input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" /> 
          <label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label> 
         </div> 
        </div> 

        <div class="af-outer af-required"> 
         <div class="form-group af-inner"> 
          <input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" /> 
          <label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label> 
         </div> 
        </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button> 
       <button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button> 
      </div> 
      </form> 
      </div> 

任何幫助將提前意識到 感謝。

Answer 1

試試這個

HTML

<div class="row"> 
    <div class="col-md-6 col-md-offset-2"> 
<div class="modal-body "> 
       <h3>Login with your CZCNR account!</h3> 
       <form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf"> 

        <div class="af-outer af-required"> 
         <div class="form-group af-inner"> 
          <input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" /> 
          <label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label> 
         </div> 
        </div> 

        <div class="af-outer af-required"> 
         <div class="form-group af-inner"> 
          <input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" /> 
          <label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label> 
         </div> 
        </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button> 
       <button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button> 
      </div> 
      </form> 
      </div> </div> </div> 

Demo Here

Answer 2

您可以在第一個div標籤中添加寬度樣式屬性。

<div class="modal-body" style="width:400px;"> 
 
       <h3>Login with your CZCNR account!</h3> 
 
       <form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf"> 
 

 
        <div class="af-outer af-required"> 
 
         <div class="form-group af-inner"> 
 
          <input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" /> 
 
          <label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label> 
 
         </div> 
 
        </div> 
 

 
        <div class="af-outer af-required"> 
 
         <div class="form-group af-inner"> 
 
          <input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" /> 
 
          <label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label> 
 
         </div> 
 
        </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button> 
 
       <button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button> 
 
      </div> 
 
      </form> 
 
      </div>