Bootstrap 3:如何控制输入组内的输入宽度？

Question

以http://jsfiddle.net/7T9r9/为例.

<li>
  <span class="row">
    <div class="col-md-3">
      <div class="input-group">
        <span class="input-group-addon">
          <input type="checkbox" class="checkbox"/>
        </span>
        <input type="text" class="form-control input-append" value="test">
        <span class="input-group-addon"></span>
      </div>
    </div>
    <div class="col-md-9">
      <div class="input-group">
        <input type="text" class="form-control"
               value="test">
        <span class="input-group-addon">
            <a href="#">
              <span class="glyphicon glyphicon-trash"></span>
            </a>
        </span>
      </div>
    </div>
  </span>
</li>

我想要实现的是让第一个输入宽度适合它内部的文本(固定宽度也可以,我猜).第二个输入应占据行的其余部分,所有元素应位于同一行.

有没有办法做到这一点？

Answer 1

我猜你的小提琴是你想要的效果的一个例子，但你不想为它使用不同的列。

1. 基于值长度的动态宽度文本输入是不可能的（除非最近通过像 Verou 这样的 css 女神找到了一些东西）。所以假设那个人的宽度是固定的。
2. 然后另一个人可以利用另一个固定宽度来进行边距等。

像这样的东西：

超文本标记语言

  <span class="row">
      <div class="test1 input-group">
        <span class="input-group-addon">
          <input type="checkbox" class="checkbox"/>
        </span>
        <input type="text" class="form-control input-append" value="test">
        <span class="input-group-addon"></span>
      </div>
      <div class="test2 input-group">
        <input type="text" class="form-control"
               value="test">
        <span class="input-group-addon">
            <a href="#">
              <span class="glyphicon glyphicon-trash"></span>
            </a>
        </span>
      </div>
  </span>

CSS

.row {
    position:relative;    
}
.test1 {
    width:200px
}
.test2 {
    position:absolute !important;
    top:20px;
    margin-left:200px;
}