bootstrap中如何控制input的宽度，有没有默认的

html-css019

bootstrap中如何控制input的宽度，有没有默认的,第1张

bootstrap本来只是一个标准化底层，而不是一个完整的框架。

为什么这么说，因为涉及到具体逻辑，具体表现的东东，都不会有（每个人的需求千变万化）。

例如，设为标准 input-s input-m input-l 短中长 40px, 120px 240px 。但长度标准看设计师的，看整体美感，不可能对设计师说， input-m 标准是120px ，你的94px设计图要重新修改！！！！

正常做法是为每一个MODEL，新增加一个CSS的hook。

用js来实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>test</title>

<style type="text/css">

#context{width:200pxheight:100pxbackground:#F60color:#fff}

a#hook{background:#669width:80pxheight:50pxline-height:50pxdisplay:block}

#wrapper .jschange{background:#CC0}

#wrapper .jschange a#hook{background:#999}

</style>

<script type="text/javascript">

function change(){

var con=document.getElementById("context")

var hook=document.getElementById("hook")

hook.onmouseover=function(){

con.className="jschange"

}

hook.onmouseout=function(){

con.className=""

}

}

window.onload=function(){

change()

}

</script>

</head>

<body>

<div id="wrapper">

<div id="context"><a id="hook" href="#">连接</a></div>

</div>

</body>

</html>

可以。

第一种：在组件中直接使用style。第二种：在组件中引入[name]。css文件。第三种：在组件中引入[name]。scss文件。第四种：在组件中引入[name]。module。css文件。

第五种：在组件中引入[name]。module。scss文件。