引导表中的输入宽度始终使用最大宽度 [英] Input width in bootstrap table always using max width

问题描述

好吧，我试图做一个输入字段的表。要设置每个字段的大小，我明白我必须在标题中设置col-size。

 < thead> 
< tr> 
< th class =col-sm-2>大< / th> 
< th class =col-sm-2>大< / th> 
< th class =col-sm-1>小< / th> 
< th class =col-sm-2>大< / th> 
< th class =col-sm-1>小< / th> 
< th class =col-sm-2>大< / th> 
< th class =col-sm-2>大< / th> 
< / tr> 
< / thead> 
  

然而，输入扩展到它们的最大宽度而不考虑字符大小。

http://jsfiddle.net/m79HR/

可能这是对Bootstrap的不恰当使用，但我认为它是带有上面标题的内联输入的最佳选择。

另外，可以说我想这个特定的网格有18列，而不是默认的12这是可能的，在这种情况下，只是在这种情况下？

解决方案

对于平板电脑屏幕，您需要为普通屏幕 col-sm - * 使用类 col-md - * 和 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>大< th> 
 th small< / th> 
< th>中等< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
< td class =col-sm-1> 
< input class =col-sm-12placeholder =col-sm-1/> 
< / td> 
< td class =col-sm-1> 
< input class =col-sm-12placeholder =col-sm-1/> 
< / td> 
< td class =col-sm-1> 
< input class =col-sm-12placeholder =col-sm-1/> 
< / td> 
< td class =col-sm-4> 
< input class =col-sm-12placeholder =col-sm-4/> 
< / td> 
< td class =col-sm-2> 
< input class =col-sm-12placeholder =col-sm-2/> 
< / td> 
< td class =col-sm-3> 
< input class =col-sm-12placeholder =col-sm-3/> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
< / div> 
< / div> 
  

Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had 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 their max width with no regard to col-size.

http://jsfiddle.net/m79HR/

Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.

Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?

解决方案

You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:

<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>

这篇关于引导表中的输入宽度始终使用最大宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！