我试图创建一行,如下所示:
下面是我的“行”的React组件代码:
/*
* The render method of this component
*/
render() {
return (
<form className="form-inline">
<FormGroup>
<InputGroup>
<InputGroup.Addon>
<input name="cb" type="checkbox" value={this.state.cb} onChange={this.handleInputChange} />
</InputGroup.Addon>
<div>
<FormControl name="remarks" type="text" value={this.state.remarks} onChange={this.handleInputChange} />
<FormControl name="amount" type="text" value={this.state.amount} onChange={this.handleInputChange} />
</div>
</InputGroup>
</FormGroup>
</form>
);
}
}
问题是我想增加“输入文本类型”字段的宽度,但是可能不是CSS冠军,我无法增加它。经过一段时间的谷歌搜索和沮丧后问这里:)
有人帮忙吗?谢谢
是的,我得到了解决方案:
如上所述这里:
可能需要自定义宽度:输入和选择的宽度为100%;默认情况下在Bootstrap中应用。在嵌入式表单中,我们将其重置为width:auto; 因此,多个控件可以位于同一行上。根据您的布局,可能需要其他自定义宽度。
因此,必须为所有元素提供自定义宽度以调整其宽度,因此我使用以下代码CSS
:
.form-inline {
width: 100%;
}
.form-group {
width: 90%;
}
.input-group {
width: 90% !important;
}
.form-control {
width: 50% !important;
}
span.input-group-addon {
width: 50px !important;
}
为我的桌子获得漂亮的宽度:
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句