css - Bootstrap 网格系统对齐问题

Question

我想弄清楚如何将驾驶执照号码下的选择 向左移动，以从驾驶执照号码中的 D 开始。这样他们就可以与上面的选择对齐。 但仍然保持这个选择小，因为下拉列表中只有 2 个字母表示状态。

<div class="row">           
    <div class="col-lg-4">
        <div class="form-group">
            <label for="birthmonth_<cfoutput>#Add#</cfoutput>">Date of birth:</label>
            <cfinclude template="../ddl/birthmonth.cfm">
        </div>
    </div>
    <div class="col-lg-4">
        <div class="form-group">
            <label>&nbsp;</label>
            <cfinclude template="../ddl/birthday.cfm">
        </div>
    </div>
    <div class="col-lg-4">
        <div class="form-group">
            <label>&nbsp;</label>
            <cfinclude template="../ddl/birthyear.cfm">
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        <div class="form-group">
            <label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
            <cfinclude template="../ddl/gender.cfm">
        </div>
    </div>
    <div class="col-lg-2">
        <div class="form-group">
            <label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label>
            <cfoutput>
            <div class="col-lg-12">
                <cfinclude template="../ddl/dlstates.cfm">  <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="form-group">
            <label>&nbsp;</label><cfinclude template="../includes/tooltip.cfm">
            <input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
            </cfoutput>
            <span id="result_<cfoutput>#Add#</cfoutput>"></span>
        </div>
    </div>
</div>

然后我试图将输入(向右)拉近一些，这样它们就不会相距太远。

我已经尝试了很多不同的组合，但出于某种原因，即使在阅读和重新阅读文档之后，我也无法弄清楚这个网格系统为什么选择开始缩进以及如何将输入移到选择的右侧更近。

如有任何帮助，我们将不胜感激。

https://jsfiddle.net/m6hqdr91/1/

Answer 1

不要在 form-group 中使用 col-lg-12(包装 input)，因为它会提供额外的 padding 在左侧和右侧，但标签上没有任何 padding。喜欢:

<div class="form-group">
  <label for="" class="labelspace">Driver license number:</label>
  <select name="" id="" class="form-control">
    <option value="1">Select</option>
  </select>
</div>

代替:

<div class="form-group">
  <label for="" class="labelspace">Driver license number:</label>
  <div class="col-lg-12">
    <select name="" id="" class="form-control">
    <option value="1">Select</option></select>
  </div>
</div>

看看下面的示例片段:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h4>With <code>col-xs-12</code> class (old code)</h4>
<div class="form-group">
  <label for="" class="labelspace">Driver license number:</label>
  <div class="col-xs-12">
    <select name="" id="" class="form-control">
    <option value="1">Select</option></select>
  </div>
</div>

<br>
<hr>

<h4>Without class (updated code)</h4>
<div class="form-group">
  <label for="" class="labelspace col-xs-12">Driver license number:</label>
  <div class="col-xs-6">
    <select name="" id="" class="form-control">
      <option value="1">Select</option>
    </select>
  </div>
</div>

希望这对您有所帮助!