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

请勿在{{1}}内使用col-lg-12（包裹form-group），因为左侧和右侧会额外input，但标签不是padding。 t上有任何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>

查看下面的示例代码段：

＆＃13;

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

＆＃13;

希望这有帮助！

Bootstrap网格系统调整问题

1 个答案: