Question

我在bootstrap中有一个基本的登录对话框，它在屏幕中央，标签位于输入框的上方。一切都在容器内保持对齐。

当我使浏览器变大时，标签会与文本框一起包装，但它们会缠绕在一起，所以为了使它更大，我将col-md-3更改为col-md-5，修复了它，但是现在当我调整浏览器大小时，文本和按钮会在页面上居中而不是左对齐。我如何阻止这一点，因为我不太确定要覆盖的引导程序css或要使用的类。我确实尝试过“离开”＃39;上课，但它没有做多少？

说实话，我很高兴然后所有人都分开，但我不确定如何解决这个问题。

<div class="container body-content" >
<section id="loginForm">
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form">
        <div class="form-group">
            <label class="col-md-5 control-label" for="username">Supervisor ID</label>
            <div class="col-md-10">
                <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-md-5 control-label" for="Password">Password</label>
            <div class="col-md-10">
                <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" />
                <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-5 col-md-10">
                <input type="submit" value="Log in" class="btn btn-default" />
            </div>
        </div>
    </form>        
</section>
</div>

这里可以找到一个小提琴： https://jsfiddle.net/bmcmecbf/

调整输出区域的大小以查看效果

Answer 1

您的列在任何给定行上不等于12，您需要确保每行等于12列，您的列等于15.我复制并修改了您的列类，使它们等于12正如你所拥有的那样，柱子会从流动中掉落并包裹在一条新的线条上，这使得它看起来像标签是集中的，而事实上它们并非如此;它是他们所在的列导致问题col-md-5。您还缺少我添加的代码中的行类。这将为您提供正确的行为/结果。

<div class="container body-content">
  <div class="row">
    <section id="loginForm">
      <form action="superLogin.asp" class="form-horizontal" method="post" role="form">
         <div class="form-group">
            <label class="col-md-3 control-label" for="username">Supervisor ID</label>
            <div class="col-md-9">
                <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" />
                <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span>
            </div>
         </div>
         <div class="form-group">
            <label class="col-md-3 control-label" for="Password">Password</label>
            <div class="col-md-9">
                <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" />
                <span class="field-validation-valid text-danger" data-valmsg-for="password" data-valmsg-replace="true"></span>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-offset-3 col-md-9">
                <input type="submit" value="Log in" class="btn btn-default" />
            </div>
         </div>
       </form>        
    </section>
  </div>
</div>

如果您希望它们位于不同的行上，请将列类更改为col-md-12。

<div class="form-group">
   <label class="col-md-12 control-label" for="username">
     Supervisor ID 
   </label>
   <div class="col-md-12">
      <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" />
  </div>
</div>

您也可以删除form-horizontal课程，因为它不是必需的。

Answer 2

请尝试以下修复此代码。不要在标签标签中包含col-md类，而应在div中使用并将标签包装在该div中。

<section id="loginForm">
<form action="superLogin.asp" class="form-horizontal" method="post" role="form">
    <div class="form-group">
        <div class="col-md-12">
            <label class="control-label" for="username">Supervisor ID</label>
        </div>
        <div class="col-md-12">
            <input class="form-control" data-val="true" data-val-required="The User ID field is required." id="username" name="username" type="text" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="username" data-valmsg-replace="true"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <label class="control-label" for="Password">Password</label>
        </div>
        <div class="col-md-12">
            <input class="form-control" data-val="true" data-val-required="The Password field is required." id="password" name="password" type="password" />
            <span class="field-validation-valid text-danger"   data-valmsg-for="password" data-valmsg-replace="true"></span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <input type="submit" value="Log in" class="btn btn-default" />
        </div>
    </div>
</form>        
</section>

Answer 3

但是现在当我调整浏览器大小时，文本和按钮会在页面中心而不是左对齐。

问题：是这些HTML行。

<label class="col-md-5 control-label" for="username">Supervisor ID</label>
<div class="col-md-10">

根据引导网格系统，您可以拥有最多12列。但是现在你有15所以你的div被推到下一行而不是停留在同一行。

解决方案：确保总共有12列。像

这样的东西

<label class="col-md-4 control-label" for="username">Supervisor ID</label>
<div class="col-md-8">

Answer 4

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="loginForm">
  <div class="col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10">
    <form action="superLogin.asp" class="form-horizontal" method="post" role="form">
      
   						<div class="form-group">
                                <label>Supervider ID</label>
                                <input class="form-control" placeholder="ID" type="email">
                            </div>
                            <div class="form-group">
                                <label>Password</label>
                                <input class="form-control" placeholder="Password" type="text">
                            </div>
                           
      
      	<div class="form-group">
           
          <input type="submit" value="Log in" class="btn btn-default pull-left" />
        </div>
    </form>       
    </div>
</section>

希望这有帮助。

Answer 5

使用某些检查工具（如Firebug）查看元素，您会看到一旦将区域的宽度扩展到某个点，引导程序中的@media查询就会出现，并且您的元素对齐（由于某种原因）。我尝试了左侧和左侧左侧的文字，但它没有用

引导程序将所有内容都集中在

5 个答案: