Geek asks and answers

The input width in the boot table is always using the maximum width

Ok, I tried to create a table with input fields. To set the sizes of each field, I realized that I need to set the col-size in the header.

<thead>
    <tr>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-1">Small</th>
        <th class="col-sm-2">Large</th>
        <th class="col-sm-2">Large</th>
    </tr>
</thead>

However, the inputs expand to a maximum width without regard to col size.

http://jsfiddle.net/m79HR/

This may not be the proper use of Bootstrap, but I saw it as the best option for inline inputs with the headers above.

Also, let's say I want this particular grid to have 18 columns instead of the default value of 12, what is possible here only in this particular case?

+3
source share
2 answers

col-md-* col-sm-* col-xs-* , col-lg-*, , , :

<div class="row">
    <div class="col-sm-12">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Very Small</th>
                    <th>Large</th>
                    <th>Small</th>
                    <th>Medium</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-1">
                        <input class="col-sm-12" placeholder="col-sm-1" />
                    </td>
                    <td class="col-sm-4">
                        <input class="col-sm-12" placeholder="col-sm-4" />
                    </td>
                    <td class="col-sm-2">
                        <input class="col-sm-12" placeholder="col-sm-2" />
                    </td>
                    <td class="col-sm-3">
                        <input class="col-sm-12" placeholder="col-sm-3" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
+8

"form-control" , bootstrap .

, , /.

<table class="table table-condensed">
    <thead>
        <tr>
            <th class="col-sm-12 col-md-4">Large</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
            <th class="col-sm-12 col-md-2">Small</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
            <td>
                <input type="text" class="form-control" />
            </td>
        </tr>
    </tbody>
</table>
+13

More articles:


All Articles