Bootstrap 3: how to control input width inside input-group?

Viewed 8063

See http://jsfiddle.net/7T9r9/ as an example.

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

What I would like to achieve is to have the first input width fitting the text inside of it (a fixed width would do as well I guess). The second input should occupy the rest of the row and all the elements should be on the same line.

Is there a way to do this?

1 Answers
Related