Question

我将以下引导程序形式分组。

我正在尝试添加一个复选框，但它似乎没有正确对齐。

如何使复选框保持对齐并位于“最大金额”下？

我希望将单选按钮添加到下一组。

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

Answer 1

通过这种方式，我通常可以实现它......只需使用列嵌套

检查我在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>

希望这有帮助！

Answer 2

问题出在 form-control 类中，其中width:100%为的解决方案
在form-control班级

之后添加另一个班级
<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" /> .auto-width { width: auto; }

Answer 3

尝试删除＆＃34;表单控件＆＃34;来自Checkbox的课程

Bootstrap - 复选框左对齐问题

3 个答案: