html 输入框自动缩短 一行内显示,如何修改Bootstrap中的HTML代码，是文字与输入框在同一行...

1、你这个图片太小了。根本看不清代码。

2、正好我也在用bootstrap这个表单样式。

3、一行，也就是一个label里面有两个东西，一个是span标签，就是文字这块。一个是input标签也就是一个控件。这两个家伙加在一起的宽度不能超过100%。而且文字这块也不能超过本身百分比要不撑格之后会造成你这种现象。

.basic-grey label>span {

float: left;

font-weight: 500;

font-size: 14px;

width: 30%; //就是这里。最好30%或者以上。你可以先设定个50%。然后慢慢调整。

text-align: right;

padding-right: 10px;

margin-top: 10px;

color: black;

}

下面是type为text的控件。其width我设置60%。这样会有一些留白。比较好看。

.basic-grey input[type="text"] {

border: 1px solid #CFCFCF;

color: #4F4F4F;

height: 30px;

margin-bottom: 16px;

margin-right: 6px;

margin-top: 2px;

outline: 0 none;

padding: 3px 3px 3px 5px;

width: 60%; //就是这里。

font-size: 14px;

line-height:15px;

box-shadow: inset 0px 1px 4px #ECECEC;

-moz-box-shadow: inset 0px 1px 4px #ECECEC;

-webkit-box-shadow: inset 0px 1px 4px #ECECEC;

}