我一直在努力制作文字输入字段' txtProduct'大。我有一些轻微的成功,但似乎字段的内联性质禁止我使用bootstrap正确地做这件事。我认为这只是一个简单的解决办法,但我不是前端人士。请提出任何建议。我希望它像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>
答案 0 :(得分:1)
这可能会这样做。要么合并到CSS文件中,要么将其粘贴到顶部的正文中:
<style>
.input-lg {font-size:2rem;padding:3px 7px;}
</style>
使用font-size进行实验 - 这主要是使输入字段变大的原因,但您也可以使用height:2rem;
和width:3rem;
来调整字段大小,而不会更改文字大小。
另外,请知道px,em,rem和vw / vh在font-size中的区别。 google-able有很多好的解释,特别是来自css-tricks.com。
答案 1 :(得分:1)
您可以尝试将其用于输入文本元素字体大小放大。
input[type='text']{
font-size: 20px;
}