Bootstrap - Kontrollkästchen links Ausrichtung Problem

Ich habe die folgende Bootstrap-Form in Gruppen unterteilt.Bootstrap - Kontrollkästchen links Ausrichtung Problem

Ich versuche, ein Kontrollkästchen hinzuzufügen, aber es scheint nicht richtig ausgerichtet zu sein.

Wie kann ich das Kontrollkästchen linksbündig ausrichten und unter dem "Max. Betrag"?

und ich möchte Radio-Button zur nächsten Gruppe hinzufügen.

 <div class="panel panel-primary"> 
     <div class="panel-heading"> Information</div> 
     <div class="panel-body"> 


      <!----> 
<fieldset> 
     <legend> Borrowing Power</legend> 

     <div class='row'> 
      <div class='col-sm-6'> 
       <div class='form-group'> 
        <label for="user_password">Desired Amount</label> 
        <!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> --> 
        <input name="desiredamount" id="" class="form-control input-normal desiredLoan"> 
       </div> 
      </div> 
      <div class='col-sm-6'> 
       <div class='form-group'> 
        <label for="user_password_confirmation" class="">Max Loan Amount</label><br> 
        <input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" /> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Personal Information</legend> 
     <div class='row'> 
      <div class='col-sm-4'>  
       <div class='form-group'> 
        <label for="user_title">Title</label> 
        <input class="form-control" id="user_title" name="user[title]" size="30" type="text" /> 
       </div> 
      </div> 
      <div class='col-sm-4'> 
       <div class='form-group'> 
        <label for="user_firstname">First name</label> 
        <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" /> 
       </div> 
      </div> 
      <div class='col-sm-4'> 
       <div class='form-group'> 
        <label for="user_lastname">Last name</label> 
        <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" /> 
       </div> 
      </div> 
     </div> 
     <div class='row'> 
      <div class='col-sm-12'> 
       <div class='form-group'> 

        <label for="user_email">Email</label> 
        <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" /> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
    <fieldset> 
     <legend>Options</legend> 
     <div class='row'> 
      <div class='col-sm-12'> 
       <div class='form-group'> 
        <label for="user_locale">Language</label> 
        <select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option> 
         <option value="en">English</option></select> 
       </div> 
      </div> 
     </div> 
    </fieldset> 
     <!----> 

</div> 

<div class="container-fluid"><!-- Row 2 --> 



<!-- 
    <div class="col-lg-4" id="userFormColumn2"> 


     <div class="form-group"> 
      <label for="mobile">Mobile Phone</label> 
      <input name="mobile" id="mobile" class="form-control input-normal"> 
      <p class="help-block">The users mobile phone number.</p> 
     </div> 


    </div> 
    <div class="col-lg-4" id="userFormColumn2"> 

     <div class="form-group"> 
      <label for="level">User Access Level</label> 
       <select name="level" id="level" class="form-control input-normal"> 
        <option value="1">1</item> 
        <option value="2">2</item> 
       </select> 
      <p class="help-block">The users system access level.</p> 
     </div> 

    </div> ---> 


      <!----> 

     </div>   





     </div>

Quelle

2017-03-07 user244394

Versuchen Sie einfach durch "Form-control" Klasse von Checkbox

Quelle

2017-03-07 16:02:44

die Arbeit gewohnt hat. Wenn ich das mache, wird das Kästchen nach oben und neben "maximale Menge" verschoben. Ich möchte das Kontrollkästchen linksbündig ausrichten und unter dem "Max. Betrag" -Text – user244394

habe ich das gleiche mit Fiddle Link versucht, die du geteilt hast und es funktioniert! –

Entfernen Sie keine andere Klasse, nehmen Sie einfach die "Formularsteuerung" aus der Checkbox und es gibt auch unnötige zusätzliche Klassen-Tag auf der Checkbox, also entfernen Sie diese auch. –

Auf diese Weise entfernen ich es normalerweise erreichen ... nur Spalte Verschachtelung verwenden

Scheck das Snippet habe ich verschachtelt class="col-sm-2" Spalte innerhalb class="col-sm-6" und fügte hinzu margin-top

#check { 
 
margin-top: -5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 

 
<head> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
<body > 
 
    
 

 
<div class="panel panel-primary"> 
 
     <div class="panel-heading"> Information</div> 
 
     <div class="panel-body"> 
 

 

 
      <!----> 
 
<fieldset> 
 
     <legend> Borrowing Power</legend> 
 

 
     <div class='row'> 
 
      <div class='col-sm-6'> 
 
       <div class='form-group'> 
 
        <label for="user_password">Desired Amount</label> 
 
        <!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> --> 
 
        <input name="desiredamount" id="" class="form-control input-normal desiredLoan"> 
 
       </div> 
 
      </div> 
 
      <div class='col-sm-6'> 
 
       <div class='form-group'> 
 
        <label for="user_password_confirmation" class="">Max Loan Amount</label><br> 
 
         <div class='col-sm-2' id="check"> 
 
        <input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" /> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>Personal Information</legend> 
 
     <div class='row'> 
 
      <div class='col-sm-4'>  
 
       <div class='form-group'> 
 
        <label for="user_title">Title</label> 
 
        <input class="form-control" id="user_title" name="user[title]" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
      <div class='col-sm-4'> 
 
       <div class='form-group'> 
 
        <label for="user_firstname">First name</label> 
 
        <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
      <div class='col-sm-4'> 
 
       <div class='form-group'> 
 
        <label for="user_lastname">Last name</label> 
 
        <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class='row'> 
 
      <div class='col-sm-12'> 
 
       <div class='form-group'> 
 

 
        <label for="user_email">Email</label> 
 
        <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend>Options</legend> 
 
     <div class='row'> 
 
      <div class='col-sm-12'> 
 
       <div class='form-group'> 
 
        <label for="user_locale">Language</label> 
 
        <select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option> 
 
         <option value="en">English</option></select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </fieldset> 
 
     <!----> 
 

 
</div> 
 

 
<div class="container-fluid"><!-- Row 2 --> 
 

 

 

 
<!-- 
 
    <div class="col-lg-4" id="userFormColumn2"> 
 

 

 
     <div class="form-group"> 
 
      <label for="mobile">Mobile Phone</label> 
 
      <input name="mobile" id="mobile" class="form-control input-normal"> 
 
      <p class="help-block">The users mobile phone number.</p> 
 
     </div> 
 

 

 
    </div> 
 
    <div class="col-lg-4" id="userFormColumn2"> 
 

 
     <div class="form-group"> 
 
      <label for="level">User Access Level</label> 
 
       <select name="level" id="level" class="form-control input-normal"> 
 
        <option value="1">1</item> 
 
        <option value="2">2</item> 
 
       </select> 
 
      <p class="help-block">The users system access level.</p> 
 
     </div> 
 

 
    </div> ---> 
 

 

 
      <!----> 
 

 
     </div>   
 

 

 

 

 

 
     </div> 
 
</body> 
 

 
</html>

hoffe, das hilft!

Quelle

2017-03-07 16:23:29 neophyte

Das Problem ist in formSteuer Klasse, die width:100%
Lösung
eine andere Klasse hinzufügen nach form-control Klasse

<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" /> 

.auto-width { 
    width: auto; 
    }

Quelle

2017-03-07 16:26:33 amansinghgusain

Bootstrap - Kontrollkästchen links Ausrichtung Problem

Antwort

Verwandte Themen