Bootstrap - 複選框左對齊問題

我想添加一個複選框，但它似乎沒有正確對齊。

我怎樣才能使複選框左對齊，並在「最大金額」？

我想將單選按鈕添加到下一個組。

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

來源

2017-03-07 user244394

只需要通過複選框

來源

2017-03-07 16:02:44

是不會工作形式控制類。如果我這樣做，它會將複選框移動到「最大量」旁邊。我希望複選框左對齊並在「最大金額」文本 – user244394

我試着與您分享的小提琴鏈接相同，它的工作原理！ –

不要刪除任何其他類，只需從複選框中取出「表單控件」，並且在複選框上還有不必要的額外類標記，請將其刪除。 –

刪除「表格控」級這樣，我通常實現它嘗試...只是使用列嵌套

檢查我已經嵌套class="col-sm-2"列內class="col-sm-6"並添加了一個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>

希望這有助於！

來源

2017-03-07 16:23:29 neophyte

的問題是在具有width:100%
解決方案
添加另一個下課form-control類

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

.auto-width { 
    width: auto; 
    }

來源

2017-03-07 16:26:33 amansinghgusain

Bootstrap - 複選框左對齊問題

回答

相關問題