使用Bootstrap设置表单的高度和宽度

使用.input-lg和.col-lg- *之类的类来设置表单的高度和宽度。

示例

您可以尝试运行以下代码来设置表单的高度和宽度-

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap Example</title>

      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">

      <script src = "/scripts/jquery.min.js"></script>

      <script src = "/bootstrap/js/bootstrap.min.js"></script>

   </head>

   <body>

      <form role = "form">

         <div class = "form-group">

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

         </div>

         <div class = "form-group">

            <input class = "form-control" type = "text" placeholder = "Default input">

         </div>

         <div class = "form-group">

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

         </div>

         <div class = "form-group"></div>

         <div class = "form-group">

            <select class = "form-control input-lg">

               <option value = "">.input-lg</option>

            </select>

         </div>

         <div class = "form-group">

            <select class = "form-control">

               <option value = "">Default select</option>

            </select>

         </div>

         <div class = "form-group">

            <select class = "form-control input-sm">

               <option value = "">.input-sm</option>

            </select>

         </div>

         <div class = "row">

            <div class = "col-lg-2">

               <input type = "text" class = "form-control" placeholder = ".col-lg-2">

            </div>

            <div class = "col-lg-3">

               <input type = "text" class = "form-control" placeholder = ".col-lg-3">

            </div>

            <div class = "col-lg-4">

               <input type = "text" class = "form-control" placeholder = ".col-lg-4">

            </div>

         </div>

      </form>

   </body>

</html>

以上是 使用Bootstrap设置表单的高度和宽度 的全部内容, 来源链接: utcz.com/z/353505.html

回到顶部