Question

Ich mag ein form haben, ein checkbox enthielt, ein textfield und button, mit textfield so viele width wie erhältlich unter. Ist das möglich?

<form> 
    <input type="checkbox"> 
    <input class='form-control'> 
    <button class="btn btn-danger pull-right"> 
    <i class="glyphicon glyphicon-minus"></i> 
    </button> 
</form> 

Hier ist ein codepen mit meiner (nicht) Absicht

EDIT: meine Frage an erfordern form-inline das gleiche Ergebnis nicht geändert

Answer 1

Sie calc() in input="text" verwenden zu erreichen und nach zu Bootstrap Docs Examples die button wäre ein Geschwister form-group und kein Kind wie Sie haben.

Denken Sie daran, dass .form-inlinenur für Formulare in Ansichtsfenstern gilt, die mindestens 768 Pixel breit sind. Sie müssen also die ganze Seite des Snippets sehen.

.form-group { 
 
    border: red solid 
 
} 
 
input[type="text"] { 
 
    width: calc(100% - 17px) 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="checkbox"> 
 
    <input type="text" placeholder="textfield"> 
 
    </div> 
 
    <button type="submit" class="btn btn-default"> 
 
    Remove<i class="glyphicon glyphicon-minus"></i> 
 
    </button> 
 
</form>

UPDATE (basierend auf Ihre Frage aktualisiert) -, dass Sie das gleiche Ergebnis auch bei kleineren Bildschirm wollen - also nicht form-inline benötigen)

Ich werde sagen, Lassen Sie form-inline aber machen button Kind von form-group statt Geschwister (wie ich früher in meiner Antwort - und wie es sollte entsprechend Bootstrap Docs Examples sein)

.form-group { 
 
    border: red solid 
 
} 
 
#f1 input[type="text"] { 
 
    width: calc(100% - 113px) /* regular button */ 
 
} 
 
#f2 input[type="text"] { 
 
    width: calc(100% - 101px) /* small button */ 
 
} 
 
#f3 input[type="text"] { 
 
    width: calc(100% - 91px) /* extra small button */ 
 
} 
 
#f4 input[type="text"] { 
 
    width: calc(100% - 141px) /* large button */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<form id="f1" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="checkbox"> 
 
    <input type="text" placeholder="textfield"> 
 
    <button type="submit" class="btn btn-default"> 
 
     Remove<i class="glyphicon glyphicon-minus"></i> 
 
    </button> 
 
    </div> 
 
</form> 
 
<form id="f2" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="checkbox"> 
 
    <input type="text" placeholder="textfield"> 
 
    <button type="submit" class="btn btn-sm btn-default"> 
 
     Remove<i class="glyphicon glyphicon-minus"></i> 
 
    </button> 
 
    </div> 
 
</form> 
 
<form id="f3" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="checkbox"> 
 
    <input type="text" placeholder="textfield"> 
 
    <button type="submit" class="btn btn-xs btn-default"> 
 
     Remove<i class="glyphicon glyphicon-minus"></i> 
 
    </button> 
 
    </div> 
 
</form> 
 
<form id="f4" class="form-inline"> 
 
    <div class="form-group"> 
 
    <input type="checkbox"> 
 
    <input type="text" placeholder="textfield"> 
 
    <button type="submit" class="btn btn-lg btn-default"> 
 
     Remove<i class="glyphicon glyphicon-minus"></i> 
 
    </button> 
 
    </div> 
 
</form>

Answer 2

Try this:

<div class="container"> 

    <div class="input-group"> 
    <input type="text" class="form-control"> 
    <div class="input-group-btn"> 
     <button type="button" class="btn btn-default"> 
     <input type="checkbox"> 
     </button> 
     <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-minus"></i></button> 
    </div> 
    </div> 

</div>