bootstrap мелкие поля

[https]

<div class="item-search">

    <form id="w0" action="/site/items" method="get">
    <div class="row">

        <div class="col-lg-4">

            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group field-itemsearch-name_ru">
<div class="col-lg-12">ru<input type="text" id="itemsearch-name_ru" class="form-control" name="ItemSearch[name_ru]" value=""></div>
</div>                </div>
                <div class="col-lg-6">
                    <div class="form-group field-itemsearch-name_en">
<div class="col-lg-12">en<input type="text" id="itemsearch-name_en" class="form-control" name="ItemSearch[name_en]" value="те"></div>
</div>                </div>
            </div>

        </div>

        <div class="col-lg-8">

            <div class="row">

                <div class="col-lg-1" style="width: 50px;"></div>

                <div class="col-sm-1" style="width: 80px;">

                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group field-itemsearch-csgotm_min has-success">
<div class="col-lg-12">от<input type="text" id="itemsearch-csgotm_min" class="form-control" name="ItemSearch[csgotm_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-6">
                            <div class="form-group field-itemsearch-csgotm_max has-success">
<div class="col-lg-12">до<input type="text" id="itemsearch-csgotm_max" class="form-control" name="ItemSearch[csgotm_max]" value=""></div>
</div>                        </div>
                    </div>

                </div>

                <div class="col-sm-1" style="width: 80px;">

                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-double_min has-success">
<div class="col-lg-12">от<input type="text" id="itemsearch-double_min" class="form-control" name="ItemSearch[double_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-double_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-double_max" class="form-control" name="ItemSearch[double_max]" value=""></div>
</div>                        </div>
                    </div>

                </div>
                <div class="col-lg-1" style="width: 80px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-priceop_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-priceop_min" class="form-control" name="ItemSearch[priceop_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-priceop_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-priceop_max" class="form-control" name="ItemSearch[priceop_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 80px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-tmdoub_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-tmdoub_min" class="form-control" name="ItemSearch[tmdoub_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-tmdoub_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-tmdoub_max" class="form-control" name="ItemSearch[tmdoub_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 80px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-tmop_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-tmop_min" class="form-control" name="ItemSearch[tmop_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-tmop_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-tmop_max" class="form-control" name="ItemSearch[tmop_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 80px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-doubtm_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-doubtm_min" class="form-control" name="ItemSearch[doubtm_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-doubtm_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-doubtm_max" class="form-control" name="ItemSearch[doubtm_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 90px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-doubop_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-doubop_min" class="form-control" name="ItemSearch[doubop_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-doubop_max">
<div class="col-lg-12">до<input type="text" id="itemsearch-doubop_max" class="form-control" name="ItemSearch[doubop_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 100px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-optm_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-optm_min" class="form-control" name="ItemSearch[optm_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-optm_max has-success">
<div class="col-lg-12">до<input type="text" id="itemsearch-optm_max" class="form-control" name="ItemSearch[optm_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>
                <div class="col-lg-1" style="width: 60px;">
                    <div class="row">
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-opdoub_min">
<div class="col-lg-12">от<input type="text" id="itemsearch-opdoub_min" class="form-control" name="ItemSearch[opdoub_min]" value=""></div>
</div>                        </div>
                        <div class="col-lg-5">
                            <div class="form-group field-itemsearch-opdoub_max has-success">
<div class="col-lg-12">до<input type="text" id="itemsearch-opdoub_max" class="form-control" name="ItemSearch[opdoub_max]" value=""></div>
</div>                        </div>
                    </div>
                </div>

            </div>
        </div>


    </div>

    <div class="hidden">
        <button type="submit" class="btn btn-primary">Искать</button>    </div>


    </form>
</div>

выглядит так http://imgur.com/VBUuNQ7

проблема в том что когда кликаю на мелкие текст поля то курсор не выводится и введенный текст не отображается

как исправить?

[https]

вот код https://jsfiddle.net/0Lcnn6L5/1/

[klierik]

CSS:

.form-control {
  padding-left: 3px;
  padding-right: 3px;
}

SCSS — на пример уменьшить значение переменной, которая задаёт padding:

$padding-base-horizontal: 3px;

 

[https]

изменил form-control, стало уже, и все равно не работает

я вот не пойму это баг бутстрап? ведь делаю все по правилам

[Igor Schnaider]

2 минуты назад, https сказал:

я вот не пойму это баг бутстрап? ведь делаю все по правилам

Нет. Ширина очень маленькая просто, отступы ее съедают.

Вот сравните:

.form-control {
    box-sizing: content-box;
}

 

[https]

.form-control {
    box-sizing: content-box;
}

это вытянуло высоту

а как исправить отступы штатными средствами?

пробовал удалить form-control но там другие глюки начинаются

[klierik]

19 минут назад, https сказал:

изменил form-control, стало уже, и все равно не работает

 

я тоже изменил и у меня все работает: https://jsfiddle.net/klierik/0Lcnn6L5/2/

что я делаю не так?

[https]

самые нижние элементы схлопнулись https://jsfiddle.net/klierik/0Lcnn6L5/2/

так вот у меня все мелкие элементы схлопнулись

Edited June 6, 2016 by https

[klierik]

У тебя ошибки в создании (и опнимании) layout'а, из-за которых "ломаются" дочерние элементы. Рекомендую начать с изучения Bootstrap Grid, ибо запись типа:

<div class="col-lg-1" style="width: 60px;">

не корректна и не отвечает принципам Bootstrap. Ты определись — или сам пишешь layout, или используешь Grid.

[https]

https://jsfiddle.net/0Lcnn6L5/3/

убрал ширину, все равно глючит

[klierik]

оно не глючит. ты пытаешься самую узкую колонку поделить еще на две. элементарно не хватает физической ширины области что бы отобразить хоть что-то.