引导文本输入高度答案

【问题标题】：Bootstrap text input height引导文本输入高度
【发布时间】：2021-02-10 16:18:14
【问题描述】：

我正在尝试在我正在编程的网站上增加表单内的文本输入高度。我尝试覆盖 20px 高度的默认引导 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>

请帮忙

【问题讨论】：

对于 Bootstrap 4 ，只需在 bootstrap css 后添加：.form-control{ padding: 2.05rem .75rem; }

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以同时使用 css height 属性作为内联css：

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

或类

<input class="inputfield"/>

和css

.inputfield {
  height: 50px
}

【讨论】：

【解决方案2】：

对于 Bootstrap 4+ 使用

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

【讨论】：

如何参数化填充父容器div？
默认情况下它采用父级的全尺寸

【解决方案3】：

虽然可以附加 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">

【讨论】：

【解决方案4】：

根据您提供的代码，您没有使用引导程序，所以我假设这就是您想要实现的目标。 https://jsfiddle.net/127c14bu/

如果要覆盖高度，可以在包含所需高度的输入文本上添加另一个 css 类。查看.overrideheight 并更改height 的值。

希望对你有帮助。

【讨论】：

这正是我想要做的，但代码在我的页面上不起作用......我使用引导程序将表单放在 class=row 的 div 中

【解决方案5】：

     <!DOCTYPE html>

     <html>
     <head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" />

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>

    <style >
    *{
     margin:0 !important;
     padding:0 ! important;
     }

      body {

        width: 100%;

        min-height: 800px;
        background-size: 100%;
        background-repeat: no-repeat;
        position:absolute;
        background-image: url(demo_BG_1024.png);
        background-color: rgb(0,0,0);

      }

      ul{
      padding-top: 0px;
      }

      .form-signin {
        width:500px !important;
        height:300px ! important;
       }

       .form-signin { 
         max-width: 500px; 
         padding: 19px 29px 29px; 
         margin: 0 auto 20px; 
         background-color: #fff; 
         border: 1px solid #e5e5e5; 
         -webkit-border-radius: 5px; 
            -moz-border-radius: 5px; 
                 border-radius: 5px; 
         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
                 box-shadow: 0 1px 2px rgba(0,0,0,.05); 
       } 
       .form-signin .form-signin-heading, 
       .form-signin .checkbox { 
         margin-bottom: 10px; 
       } 
       .form-signin input[type="text"], 
       .form-signin input[type="password"] { 
         font-size: 16px; 
         height: auto; 
         margin-bottom: 15px; 
         padding: 7px 9px; 
      } 


    .left {
    float: left;
    display: block;
    width: 25%;
    padding-left: 0px;
    text-align: left;    
    }

    .right {
    float: right;
    display: block;
    width: 75%;
    text-align: right;
    padding-right: 0px;
    }

    .header
    {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        color: white;
        font-size: 64px;
        padding-top: 60px;
    }
     .header2
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 46px;

    }

     .header3
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 30px; 
    }

     .header4
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 18px; 
    }

    nav{
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    width: 100%;
    height: 78px;
    padding:0 px;
    background-color: rgb(0,0,0);

    }

    ul li {
    list-style-type: none;
    margin: 0px;
    display: inline-block;
    }

    #logo_image
    {
    padding: 10px 30px!important;
    }


    .menu_buttons
    {
    font-family:'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color:white ;
    display: inline-block;
    padding: 10px 30px !important;
     }

   .demobtn {
    height:1.3em;
    width:2.5em;
    background-color:#00b6ee;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:'Lato', sans-serif;
    font-weight: 300;
    font-size:30px;
    padding:10px 100px;
    text-decoration:none;
    text-shadow:0px 0px 0px #2f6627;
  }
    .demobtn:hover {
     `enter code here`background-color:#00b6ee;
        text-decoration:none;
  }
   .demobtn:active {
    position:relative;
        text-decoration:none;
    top:1px;
   }

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

  }

  .overrideheight {
     height: 90px;
   }

  .sign-in
   {
    padding-top: 100px;
    margin-top:100px;
  }

  .myForm
   {
    position:relative;
    top:230px;
    margin-left: auto;
    margin-right: auto;
  }
      </style>

   </head>

    <body>
    <div class="row">

<nav>
    <ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>




    <ul class="right" >

        <li><a class="menu_buttons" href="#">Login</a></li>
    </ul>

</nav>

</div>


<div class="row ">
<div class="myForm">
<div class="row sign-in ">
  <div class="col-xs-6 col-md-4 col-lg-4"></div>
  <div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
  <div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>


</div>
</div>

 <form  class="text-center form-group" action="" method="post">
  <div class="row">
 <input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
 </div>
 <input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
 <br>
 <input type="submit" id="submit" value="Login" /><br>
 </form>
<div class="navbar-fixed-bottom">
    <ul class="left">
        <li><a href="#" class="menu_buttons" >Home</a></li>
        <li><a href="#" class="menu_buttons" >About</a></li>
        <li><a href="#" class="menu_buttons" >Support</a></li>
    </ul>
    <ul class="right">
        <li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
    </ul>
</div>
<script>
$(document).ready(function(){
    $("#submit").attr("disabled",true);
    var username = '';
    $("#username").on('change keyup paste mouseup', function() {
        if ($(this).val() != username) {
            username = $(this).val();
        }
    });
    var password = '';
    $("#username").on('change keyup paste mouseup', function() {
        if ($(this).val() != password) {
            password = $(this).val();
            if(username!=""&&password!="")
            {
                $("#submit").attr("disabled",false);
            }

        }
    });

});
</script>
</body>
</html>

【讨论】：