php - 如何在 2 列 Bootstrap 2.32 布局的右列中修复表单

Question

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

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

查看 fork 的 bootply -> http://www.bootply.com/Q3JYi69nqE

我的目标是 #registration-form，因此否决不会影响其他表单，.control-label、.controls 等等在其他地方，只是特定的 #registration-form。