Jak rozciągnąć pole wejściowe do pełnej szerokości?

Możesz określić, że wszystkie elementy podrzędne klasy „col2” mają 100% szerokości, dodając:

.col2 * { width:100%;}

Zobacz mój przykład dabbleta:

http://dabblet.com/gist/2227353
http://dabblet.com/gist/2227353

Zacznij od znaczników semantycznych, ponieważ nie są to dane tabelaryczne. Ponadto, po dodaniu etykiet, nie potrzebujemy dodatkowego opakowania DIV, które jest czystsze.

<ul class="formList">

 [*]

 <label for="input_1">

 Report Number

 </label>

 <input id="input_1" name="input_1" type="text"/>

 [/*]

 [*]

 <label for="input_2">

 Report Type

 </label>

 <select id="input_2" name="input_2"></select>

 [/*]

[/list]

Następnie dodaj CSS:

.formList {

 border:1px solid #000;

 padding:10px;

 margin:10px;

}

label {

 width:200px;

 margin-left:-200px;

 float:left;

}

input, select {

 width:100%;

}

li {

 padding-left:200px;

}

Przykład JS Fiddle:

http://jsfiddle.net/6EyGK
http://jsfiddle.net/6EyGK/
/

Możesz użyć:

.col2 * {

 width: 100%;

}

Aby dopasować dowolny element podrzędny

.col2

. jak widzisz

tutaj
http://jsfiddle.net/darkajax/9W5M6/... Lub:

.col2 > * {

 width: 100%;

}

Aby dopasować tylko najbliższe dzieci.

podczas korzystania z Twittera

Bootstrap

:
a wejście znajduje się wewnątrz kolumny
po prostu dodaj do

& < input & >

class = "container-fluid"

Uwaga
>
To nie jest odpowiedź, ale komentarz, który zawiera zbyt dużo kodu, aby przejść do sekcji komentarzy. Więc proszę, nie poniżaj mnie, dobrze? :)
Inne dodatki znaczników semantycznych do odpowiedzi Matthew Darnella:
Jeśli zawiniesz etykiety wokół wejścia i zaznaczenia, możesz uniknąć używania atrybutów

for

i

id

.

<ul class="formList">

 [*]

 <label>

 Report Number

 <input name="input_1" type="text"/>

 </label>

 [/*]

 [*]

 <label>

 Report Type

 <select name="input_2"></select>

 </label>

 [/*]

[/list]

Lub użyj listy definicji, która da ci dodatkową kontrolę

<dl class="formList">

 <dt>

 <label for="input_1">

 Report Number

 </label>

 </dt>

 <dd>

 <input id="input_1" name="input_1" type="text"/>

 </dd>

 <dt>

 <label for="input_2">

 Report Type

 </label>

 </dt>

 <dd>

 <select id="input_2" name="input_2"></select>

 </dt>

</dl>