使用bootstrap的类在表内输入文本大小

时间:2014-04-01 14:57:25

标签: html css html5 twitter-bootstrap html-table

我有下面的代码,我试图使用bootstrap的类来调整文本输入元素的大小。但是,我无法让事情缩小。我希望它在桌面上更小,而不是占用大量的空间。

<div class="container White_BG">
<div class="row" style="margin-left:0;margin-right:0;">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

<h1>Quickly place your order with this form.</h1>
<h2>Please enter the item numbers that you wish to order; once you add to the cart, then you will be able to change the quantity of those items ordered.</h2>

<div class="table-responsive">
    <form method="post" name="QuickOrderMulti">
        <table class="table table-bordered table-condensed table-hover">
            <tr>
                <th>Item #</th>
                <th>Quantity</th>
                <th>Description</th>
                <th>Price</th>
                <th>Subtotal</th>
            </tr>
            <tr>
                <td>
                    <div class="col-lg-2">
                        <input type="text">
                    </div>
                </td>
                <td>
                    <input type="text">
                </td>
                <td>

                </td>
                <td>

                </td>
                <td>

                </td>
            </tr>
        </table>
    </form>
</div>

</div>
</div>
</div>

违规行是:

<td>
    <div class="col-lg-2">
        <input type="text">
    </div>
</td>

我尝试使用col-lg-2使其仅占用2个网格列,因此它可能会更小。但没有这样的运气。

1 个答案:

答案 0 :(得分:1)

不要将其包含在div中,而是尝试使用所选类进行输入。

e.g。

<input class="col-lg-2" type="text">