Размер регистрационной формы слишком большой

Question

Ive получил мою регистрационную форму слишком широко, она занимает 80% от ширины страниц, как вы могли видеть изображение ниже. Я использую по умолчанию bootstrap.min.css

Heres 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>