如何格式化引导输入表单 - 所有标签的宽度相同

Question

我用 Bootstrap 3 制作了一个表格，我想为所有标签设置相同的宽度。

从这里：

对此：

我为此做了一个小提琴：http://jsfiddle.net/52VtD/4262/

<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
    <div class="input-group">
              <span class="input-group-addon">Kennzeichen</span>
              <input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
            </div>
            ...
  </form>

Answer 1

好吧，这已经很久了，但我仍然偶然发现了同样的问题。我不想给它一个非动态的宽度，而是想让它“正确”并调整到给定内容的宽度。 虽然我不知道这是否违背了 Bootstrap 的预期用例，但我确实通过使用定义了两列的网格实现了动态行为——一列用于标签（内容的宽度），另一列用于输入（剩余宽度）。

HTML：

<div class="input-group grid-container">
    <span class="input-group-text">Your Name</span>
    <input type="text" class="form-control" name="name" placeholder="Kimi No Na Wa">
    <span class="input-group-text">Your Age</span>
    <input type="text" class="form-control" name="age" placeholder="42">
    <span class="input-group-text">Your Unnecessarily Long Label That Still Fits Inside Here</span>
    <input type="text" class="form-control" name="wow" placeholder="Yay">
</div>

CSS：

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: max-content 1fr;
}
.grid-container .form-control {
    width: 100%;
}

这是我的小提琴：https://jsfiddle.net/r8jm7Lqu/

Answer 2

这是我做的例子：

<span class="input-group-addon" style="width: 20%;">Last Name</span>
<input id="lname" type="text" class="form-control input-lg" name="lname" placeholder="Last Name">

我没有更改或自定义引导程序的类，因为它会影响全局。我讨厌看到我的登录页面的宽度与我在员工输入模块中所述的宽度相同。

Answer 3

它们是设置所有标签大小相同的两种方法。

DEMO

1) CSS

.input-group-addon {
    width: 253px;
}

但如果标签值文本是动态增加或减少的，则需要使用 jQuery 修复此问题。

DEMO

2) jQuery

var max = 0;
$(".input-group-addon").each(function(){
    if ($(this).width() > max)
        max = $(this).width();   
});
$(".input-group-addon").width(max);

Answer 4

<form id="create_new_campaign" name="create_new_campaign" action="kampagnen.php" method="post" enctype="multipart/form-data">
    <div class="input-group" style="width: 100%;">
              <span class="input-group-addon"style="width: 35.1%;">Kennzeichen</span>
              <input type="text" class="form-control" placeholder="Kennzeichen" name="data[kennzeichen]" id="kennzeichen">
            </div>
            <div class="input-group"style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">von</span>
              <input type="text" class="form-control span2" id="von">
            </div>
            <div class="input-group" style="width: 100%;">
                <span class="input-group-addon" style="width: 35.1%;">bis</span>
              <input type="text" class="form-control span2" id="bis">
              </div>
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Produktmanager</span>
              <input type="text" class="form-control" placeholder="Produktmanager" name="data[prod_manager]" id="prod_manager">
            </div>

            <div class="input-group"style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Verantwortlicher Fachbereich</span>
              <input type="text" class="form-control" placeholder="Fachbereich" name="data[fachbereich]" id="fachbereich">
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Fachbereich</span>
              <input type="text" class="form-control" placeholder="AnsprechpartnerFachbereich" name="data[ap_fachbereich]" id="ap_fachbereich">
            </div>

            <div class="input-group" style="width: 100%;">
              <span class="input-group-addon" style="width: 35.1%;">Ansprechpartner Vertrieb</span>
              <input type="text" class="form-control" placeholder="AnsprechpartnerVertrieb" name="data[ap_vertrieb]" id="ap_vertrieb">
            </div>

            <div class="input-group" align="center" style="width: 100%;">
                <br />
                <button type="submit" class="btn btn-primary">Speichern</button>&nbsp;&nbsp;&nbsp;
                <input type="reset" value="Reset" class="btn btn-warning">
            </div>
  </form>

http://jsfiddle.net/52VtD/4264/

Answer 5

这应该可以解决问题：

  .input-group{
      width: 100%;
  }
  .input-group-addon{
      width: 45%;
      text-align: left;
  }
  .form-control {
      width: 55%;
  }

这是分叉的小提琴：

http://jsfiddle.net/6K8sF/