堆棧內存溢出
  簡體   English   中英

Bootstrap 文本輸入高度

[英]Bootstrap text input height

 原文  2015-06-09 10:48:58  2   5    html/ css/ twitter-bootstrap-3

問題描述

我正在嘗試增加我正在編程的站點上表單內的文本輸入高度。 我嘗試覆蓋 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>

請幫忙

5 個解決方案

解決方案1
 15 已采納  2015-06-09 12:11:28

您可以將 css height屬性用作內聯 css ：

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

或班級

<input class="inputfield"/>

和 CSS

.inputfield {
  height: 50px
}

解決方案2
 2  2020-10-01 15:41:45

對於 Bootstrap 4+ 使用

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

解決方案3
 1  2020-09-22 08:29:39

雖然可以附加一個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
 0  2015-06-09 11:08:28

根據您提供的代碼，您沒有使用引導程序，因此我假設這就是您要實現的目標。 https://jsfiddle.net/127c14bu/

如果要覆蓋高度，可以在包含所需高度的輸入文本上添加另一個 css 類。 查看.overrideheight並更改height的值。

我希望它有幫助。

解決方案5
 0  2015-06-09 11:39:04

     <!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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何減少引導程序中輸入文本字段的高度？ 帶引導的TD全高輸入 文本框輸入高度 Bootstrap中的文本區域自動高度 在Bootstrap中更改輸入文本 Bootstrap導航欄上的文本輸入 Bootstrap 4 文本輸入 ID Bootstrap（輸入文本到模態） 文本在bootstrap 3輸入文本上不可見 減少Twitter Bootstrap輸入字段的高度？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM