bootstrap - 怎么样给表单文本框设置合适的宽度呢？

问题描述

问 题

默认的宽度是100% 但是感觉太宽了 我想给文本框设置的宽度是500px 给表单加上form-inline又太窄了 如果在样式表里面直接写width:500px；又不支持响应式了 我就是想让屏幕变小时也能跟着变化 这个应该怎么办呢？ 用栅格系统吗？

<div class="container" id="form1">
     <form role="form" >
       <div class="form-group">
       <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
       </div>
     </form>
   </div>

解决方案

可以这样写:

<div style="width:30%">
    <input style="width:100%">
</div>

告诉浏览器，input宽度是父元素宽度的100%，整个屏幕的30%，会随着屏幕的大小而改变。

或者：

<style>
  @media (min-width:768px){
     col-md-3 {
        width: 25%;
     }
  }
  @media (max-width:768px){
     col-xm-4 {
       width: 33.3333333%;
    }
  }
</style>

<input class="col-md-3 col-xm-4">

---

意思是如果屏幕宽度大于768px，则使用col-md-3这个样式，input宽度为25%，如果屏幕小于768px，则使用col-xm-4这个样式，input宽度为33.3333333%。

这篇关于bootstrap - 怎么样给表单文本框设置合适的宽度呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！