需要放大文本输入引导答案

【问题标题】：Need to enlarge text input bootstrap需要放大文本输入引导
【发布时间】：2016-03-19 03:08:25
【问题描述】：

我一直在努力使文本输入字段“txtProduct”更大。我取得了一些轻微的成功，但似乎字段的内联性质禁止我使用引导程序正确执行此操作。我想这是一个简单的修复，但我不是前端人员。请提出任何建议。我希望它是 col-md-10 之类的东西……

我需要更大的第一个文本字段。

<div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <p class="lead">xxxxx</p>
            <form class="form-inline">
                <div class="form-group col-xs-push-10 col-md-pull-10">
                        <input class="form-control input-lg" id="txtProduct" name="txtProduct" type="text" placeholder="e.g. ALFALFA SPROUTS" autocomplete="on">
                    </div>
                <div class="form-group">
                    @Html.DropDownListFor(x => x.Markets, new SelectList(Model.Markets, "Value", "Text"), new { @class = "form-control input-lg" })
                </div>
                <button type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-search"></span></button>
            </form>
          <div id="status" name="status"></div>
        </div>
        <div class="col-md-2"></div>
    </div>

【问题讨论】：

标签： html css twitter-bootstrap razor

【解决方案1】：

这可能会做到。合并到您的 CSS 文件中，或将其粘贴到顶部的正文中：

<style>
    .input-lg {font-size:2rem;padding:3px 7px;}
</style>

使用字体大小进行实验——这主要是使输入字段变大的原因，尽管您也可以使用height:2rem; 和width:3rem; 来调整字段大小而不改变文本大小。

另外，了解 px、em、rem 和 vw/vh 在字体大小方面的区别。很多很好的解释谷歌，特别是来自 css-tricks.com。

【讨论】：

【解决方案2】：

你可以试试这个让输入类型的文本元素字体大小放大。

input[type='text']{
 font-size: 20px;
}

【讨论】：