Question

我有一个HTML页面，其中我有不同的输入字段，一些有单位，有些没有。

当我在span中添加一个input-group-addon类时，整个输入的宽度会完全混乱。

我的问题是，我能做些什么，以便我的输入＆＃34; Field 1＆＃34;与左边和右边的其他两个对齐？

我尝试添加左边距：15px;在第1场，但不幸的是，这给了这个输出，看起来并不好。

我正在使用Bootstrap作为字段。感谢。

以下是HTML的代码：

＆＃13;

.inputUnite {
  margin-left: 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
  <div class="composant">
    <div class="form-group row">
      <div class="col-md-12">
        <div class="control-label">
          <label for="input_A2B"><span class="symbol-required">*</span><span>Field 1</span></label>
        </div>
      </div>
      <div class="col-md-6 input-group">
        <input class="form-control inputUnite" aria-invalid="false" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">
        <span class="input-group-addon" id="unit_A2B">cm</span>
      </div>
    </div>
  </div>
</div>
<div>
  <div class="composant">
    <div class="form-group row">
      <div class="col-md-12">
        <div class="control-label">
          <label for="input_T5ZA2"><span class="symbol-required">*</span><span>Field 2</span></label>
        </div>
      </div>
      <div class="col-md-6">
        <input class="form-control" aria-invalid="false" required="required" data-format="alphanumerique" maxlength="2" id="input_T5ZA2" name="T5ZA2.value" value="" data-spinnertabindex="null" tabindex="null">
      </div>
    </div>
  </div>
</div>
<div>
  <div class="composant">
    <div class="form-group row has-error">
      <div class="col-md-12">
        <div class="control-label">
          <label for="textarea_A3D"><span class="symbol-required">*</span><span>Field 3</span></label>
        </div>
      </div>
      <div class="col-md-6">
        <textarea class="form-control has-error" aria-invalid="true" required="required" data-format="alphabetique" maxlength="558" id="textarea_A3D" name="A3D.value" data-spinnertabindex="null" tabindex="null"></textarea>
        <p class="letter-count" aria-live="polite"><span>558</span> caractères restants</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

在div col-md-6中添加另一个类是它搞砸了的原因。所以我所做的是将代码分成两个不同的代码，如下所示：

<div>
        <div class="composant">
                <div class="form-group row has-error">
                    <div class="col-md-12">
                        <div class="control-label">
                            <label for="input_A2B">
                                <!-- caractère obligatoire -->
                                <span class="symbol-required">*</span>
                                <span>Field 1</span>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <input class="form-control" aria-invalid="true" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">       
                            <span class="input-group-addon" id="unité_A2B">cm</span>
                        </div>
                    </div>
                </div>
        </div>
</div>

Answer 2

如果您只是向左边距15px，请将inputUnite（您定义的那个）从form-control div移动到父div input-group。这将对所有输入组，输入和“cm”范围应用更改。

要使该样式仅适用于input-group，您需要将col-md-6 div包装为row div'，并将所有其他输入文件分隔到另一个{{1} } div。

在下面的代码中，我添加了第二个输入字段，以便我们可以看到相对位置，每个输入都是自己的row div。

row

codepen

Answer 3

只需从input-group移除您的.col-md-6，然后在.col-md-6内使用课程input-group制作另一个div，以便更好地理解代码。

还可以在.container ...

之外使用.container-fluid或.row类

此处无需使用.inputUnite课程......

Stack Snippet

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="composant">
    <div class="form-group row">
      <div class="col-md-12">
        <div class="control-label">
          <label for="input_A2B"><span class="symbol-required">*</span><span>Field 1</span></label>
        </div>
      </div>
      <div class="col-md-6">
        <div class="input-group">
          <input class="form-control inputUnite" aria-invalid="false" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">
          <span class="input-group-addon" id="unit_A2B">cm</span>
        </div>
      </div>
    </div>
  </div>
  <div class="composant">
    <div class="form-group row">
      <div class="col-md-12">
        <div class="control-label">
          <label for="input_T5ZA2"><span class="symbol-required">*</span><span>Field 2</span></label>
        </div>
      </div>
      <div class="col-md-6">
        <input class="form-control" aria-invalid="false" required="required" data-format="alphanumerique" maxlength="2" id="input_T5ZA2" name="T5ZA2.value" value="" data-spinnertabindex="null" tabindex="null">
      </div>
    </div>
  </div>
  <div class="composant">
    <div class="form-group row has-error">
      <div class="col-md-12">
        <div class="control-label">
          <label for="textarea_A3D"><span class="symbol-required">*</span><span>Field 3</span></label>
        </div>
      </div>
      <div class="col-md-6">
        <textarea class="form-control has-error" aria-invalid="true" required="required" data-format="alphabetique" maxlength="558" id="textarea_A3D" name="A3D.value" data-spinnertabindex="null" tabindex="null"></textarea>
        <p class="letter-count" aria-live="polite"><span>558</span> caractères restants</p>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用Bootstrap（CSS）减小输入的大小

3 个答案: