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

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

动态宽度基于值长度的文本输入是不可能的（除非最近通过像Verou找到某些东西的css女神）。所以假设那个人有固定的宽度。
然后另一个人可以利用其他固定宽度来做保证金等。

这样的事情：

HTML

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

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

1 个答案: