如何修复2列bootstrap 2.32布局右列中的表单

Question

我有一个与codeigniter一样的引导页面。如您所见，注册表单字段向右偏移。我很困惑为什么会这样。我想将表单字段向左移动以与表单的其余部分一致。表单代码以：

开头

<div class="row">
<div class="span6">    


<div class="container-fluid"> 

<div class="hero-unit" class="offset4">
<form id="registration-form" class="form-horizontal" action="<?=site_url('Post_controller/getData')?>" method="post">
 <h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2>
 <!-- Text input-->
<div class="form-control-group">
  <label class="control-label" for="FirstName">First Name</label>
  <div class="controls">
    <input id="FirstName" name="FirstName" type="text" placeholder="Bob" class="input-xlarge" required="">

  </div>
</div>


<!-- Text input-->
<div class="form-control-group">
  <label class="control-label" for="LastName">Last Name</label>
  <div class="controls">
    <input id="LastName" name="LastName" type="text" placeholder="Smith" class="input-xlarge" required="">

  </div>
</div>

接下来是基础2列模板：

    <div class="row">
        <div class="span6">
            <h2>Here Are The Details:</h2>

                    <p>  <h3> <?php echo $lorem ?> </h3> 


            </p>
            <p>
                <a class="btn">Learn More</a>
            </p>
        </div>
        <div class="span6">
            <h2>Sign Up Now: </h2>
                            <p>
            <?php echo $form ?>
                            </p>
            <p>
                <a class="btn">Learn More</a>
            </p>
        </div>

    </div>

我该如何解决这个问题？我已创建http://www.bootply.com/3JITaNo4Vv来帮助。

Answer 1

问题是以固定宽度和边距构建的Bootstraps（不知何故奇怪）：

.form-horizontal .control-label {
   width: 160px;
} 
.form-horizontal .controls {
   margin-left: 180px;
}

优先考虑使用适合您的表单的内置CSS，例如

#registration-form .control-label {
  width: 90px;
}
#registration-form .controls {
  margin-left: 100px;
}

参见forked bootply - ＆gt;的 http://www.bootply.com/Q3JYi69nqE

我定位#registration-form因此，覆盖不会对其他形式造成影响，.control-label，.controls等等，只有特定的#registration-form。