Блог

Главная - Вопросы по программированию - Как создать группу ввода в таблице разумного размера в bootstrap3

Как создать группу ввода в таблице разумного размера в bootstrap3

#twitter-bootstrap-3

#twitter-bootstrap-3

Вопрос:

Если я помещаю input-group с input-group-btn в ячейку таблицы, этот столбец пытается занять как можно больше места. Есть ли хороший способ ограничить это? Я неправильно использовал стили BS3?

Вот jsfiddle http://jsfiddle.net/Mn5u5/1 

 <table class="table table-condensed">
    <tr>
        <td>test 1</td>
        <td>test 2</td>
        <td>test 3</td>
        <td>test 4</td>
        <td>test 5</td>
    </tr>
    <tr>
        <td>
            <div class="input-group">
                <input type="text" class="form-control" />
                <div class="input-group-btn">
                    <button class="btn btn-small btn-default"><span class="glyphicon glyphicon-plus"></span></button>
                </div>
            </div>
        </td>
        <td>test 2</td>
        <td>test 3</td>
        <td>test 4</td>
        <td>test 5</td>

    </tr>
</table>

Комментарии:

1. добавление width = ‘30%’ к td, кажется, помогает, но правильное ли это решение? jsfiddle.net/Mn5u5/2

Ответ №1:

Элементы управления формой начальной загрузки по умолчанию имеют значение width:100% . Наиболее простой вариант заключается в следующем:

  1. Установите явные значения ширины для <td> . Обратите внимание, что вам нужно сделать это только один раз для каждого столбца. Я бы посоветовал использовать столбец <th> , предполагая, что он у вас есть.

Комментарии:

1. Есть ли шанс, что вы могли бы связать jsfiddle, который работал для # 2? Я попытался установить размер для нескольких разных элементов, и если это не был размер самого столбца, мне не повезло.

2. Это странно. На самом деле я не пробовал это, поскольку я использовал этот трюк раньше для полей, но никогда для полей, которые были в ячейках таблицы. Включение его в .input-group , казалось, уменьшило размер входных данных для меня, но размер ячейки таблицы не изменился, что действительно странно. Я собираюсь убрать # 2 из своего ответа, пока у меня не будет возможности разобраться с этим.

3. А еще лучше, установите width для наследования, чтобы он получал свою ширину от родительского элемента и в основном возвращал ее к тому, какой она должна была быть