Css 为什么引导列居中而不是左对齐？

我使用的是标准的bootstrap3css

我的问题的图像：

我的HTML如下：

<div class="col-sm-12 col-lg-6 col-lg-offset-3 relative text-center">
    <h3 class="text-center">Tell Us More About Yourself:</h3>
    <label for="motto" class="col-sm-4 control-label">Motto:</label>
    <div class="col-sm-8">
        <input id="motto" type="text" class="form-control" name="motto" ng-model="profile.UserParams.Motto">
    </div>
    </br>
    </br>
    <label for="occupation" class="col-sm-4 control-label">Occupation:</label>
    <div class="col-sm-8">
        <input id="occupation" type="text" class="form-control" name="occupation" ng-model="profile.UserParams.Occupation">
    </div>
    </br>
    </br>
    <label for="location" class="col-sm-4 control-label">Location:</label>
    <div class="col-sm-8">
        <input id="location" type="text" class="form-control" name="location" ng-model="profile.UserParams.Location">
    </div>
    </br>
    </br>
    <button style="margin-top:25px;" class="btn btn-lg btn-primary" ng-click="updateProfile()">Update Profile</button>
</div>
<div style="margin-top:50px;" class="col-sm-12 col-lg-6 col-lg-offset-3 relative text-center">
    <h3>Change Your Password:</h3>
    <div class="form-group">
        <form name="changePassword">
            <label for="password" class="col-sm-4 control-label">New Password (must be at least 5 characters long):</label>
            <div class="col-sm-8">
                <input id="password" type="password" class="form-control" name="password" ng-minlength="5" ng-model="user.password" required>
            </div>
            </br>
            </br>
            <label for="cpassword" class="col-sm-4 control-label">Confirm New Password:</label>
            <div class="col-sm-8">
                <input id="cpassword1" type="password" class="form-control" name="cpassword" ng-minlength="5" ng-model="user.confirmPassword" compare-to="user.password" required>
                <div ng-messages="changePassword.cpassword.$error" style="color:maroon" role="alert">
                    <div ng-message="compareTo">Your passwords must match!</div>
                    <div ng-message="minlength">Your password is too short!</div>
                </div>
            </div>
            </br>
            </br>
            <button style="margin-top:25px;" class="btn btn-lg btn-danger" ng-click="changePasswordFunction()">Change Password</button>
        </form>
    </div>
    </br>
    </br>
</div>

告诉我们更多关于你自己的情况：
座右铭：




职业：




地点：




更新配置文件
更改您的密码：
新密码（长度必须至少为5个字符）：




确认新密码：
您的密码必须匹配！
你的密码太短了！




修改密码

我希望HTML中的

能够反映上面的HTML/CSS（告诉我们更多关于你自己的信息），但是我得到了

确认新密码
标签，它被粘贴在中间，即使它应该
浮动：左并位于
新密码
标签下。表单没有任何特殊的CSS。当
col-sm-4
时，为什么
确认新密码像这样居中

我当前的视口是一台笔记本电脑，它到达了
lg
断点，但奇怪的是，这个错误只出现在768px到1600px之间。当我使用Chrome Dev工具设置宽桌面视口时，我得到了正确的格式。。。但是我不明白为什么会给我断点。
没有必要浮动它们，如果使用引导，只需使用行和列，在这些类中包装元素。浮动是你的风格混乱的地方。另外，我建议将来使用css Flexbox，它比bootstrap好得多，也更灵活。
您必须使用bootstrap
行
列
规则来对齐
表单中的下列布局

注意：请参见“展开预览”中的以下代码段



告诉我们更多关于你自己的情况
座右铭：




职业：




地点：




更新配置文件
更改您的密码：
新密码（长度必须至少为5个字符）：




确认新密码：
您的密码必须匹配！
你的密码太短了！




修改密码




您正面临着浮动问题，因为您没有将元素包装在
行中。您可以在这个问题中看到：

因此，如果您不使用bootstrap提供的容器/行，您将得到以下结果：


div{
边框：1px实心；
}

lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
益智
lorem ipsum lorem ipsum lorem ipsu
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
因为浮动。。您应该将它们包装在
行中
。。。您没有遵循引导规则，必须使用容器和rows@TemaniAfif但是我没有把其他的放在一行？
没有必要浮动它们
bootstrap 3使用浮动元素，他没有浮动它们。。。Bootstrap4正在使用flex，所以如果需要使用flex，他应该升级到Bootstrap4。。我不同意
它比bootstrap好得多，也更灵活。
：bootstrap 3即使它依赖于float也可以是处理布局的一个非常好的方法。如果您要创建自定义布局，使用flex比bootstrap更容易处理样式，但是，每个人都有自己的@TemaniAfifbut bootstrap也使用flex:），并且可以处理自定义布局；）这也需要在代码的第一部分完成（即使我们没有直观地看到问题，它仍然没有很好地结构化。）只是在第一部分缺少容器，这将很好；）