Question

我正在尝试增加我正在编程的网站上的表单内的文本输入高度。我试图覆盖20px高度的默认bootstrap css，但似乎没有任何变化。这是我的代码 -

CSS

.inputfield
 {  
 position:relative;  
 top:30px;  
 font-size: 60px!important; 
 font-family:'Lato', sans-serif !important;
 font-weight: 400;
 color:white ; 
 width:400px;  
 line-height: 100px!important;  
 opacity:0.2; 
 }

和

表单HTML

  <form  class="text-center" action="" method="post">
  <div class="row">
 <input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
 </div>
 <input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
 <br>
 <input type="submit" id="submit" value="Login" /><br>
 </form>

请帮助

Answer 1

您可以将css height 属性用作内联css：

<input style="height:50px"/>

或上课

<input class="inputfield"/>

和CSS

.inputfield{

height:50px

}

Answer 2

根据您提供的代码，您不使用引导程序，因此我将假设这是您要实现的目标。 https://jsfiddle.net/127c14bu/

如果要覆盖高度，可以在输入文本上添加另一个包含所需高度的css类。请参阅UPDATE `entity_type` SET `definitions` = REPLACE( `definitions`, 's:54:"\0Doctrine\\\\Common\\\\Collections\\\\ArrayCollection\0_elements', 's:53:"\0Doctrine\\\\Common\\\\Collections\\\\ArrayCollection\0elements' );并更改.overrideheight的值。

我希望它有所帮助。

Answer 3

UIScrollView

Answer 4

尽管可以附加CSS文件来应用您的请求，但是Bootstrap提供了一些预定义的类，可以帮助您实现目标。

在引导程序4中：

您可以使用.form-control-sm或.form-control-lg类来操纵表单控件的大小。

<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">

当然，您可以通过覆盖它们来更改类的默认设置：

.form-control-sm {
    height: calc(1.5em + .5rem + 2px);
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;
}

在引导程序3中：

您可以使用.input-lg和.input-sm之类的类来设置输入元素的高度。

<input class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" type="text">

Answer 5

对于Bootstrap 4以上版本使用

<input type="text" class="form-control form-control-lg mb-2">

Bootstrap文本输入高度

5 个答案: