【发布时间】:2015-05-12 22:59:17
【问题描述】:
我正在使用 Twitter Bootstrap3 构建一个(长)表单,但我遇到了一个需要详细解释的小字段的设计问题。
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>The form</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">Username</label>
<div class="col-md-5">
<input id="username" name="username" placeholder="" class="form-control input-md" required="" type="text">
<span class="help-block">A very long explanation, that is longer than the above input field. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</div>
</div>
</fieldset>
</form>
如果我用 col-md-8 替换 col-md-5 类,它会增加输入字段和 .help-block 宽度(这是逻辑,因为它们都包含在同一个 div 中),这会导致输入字段过大布局。
有没有办法使用 Twitter Bootstrap 来获得比相关输入字段更大的 .help 块,而不会失去表单的“响应能力”?
【问题讨论】:
-
长尺寸违背了
help-block的全部目的。
标签: twitter-bootstrap twitter-bootstrap-3