Boostrap表单控件类不是wordwraping标签

Question

我有一个Bootstrap 3.0应用程序，在表单中我有以下代码：

<div class="panel-body">
        <div class="row">
            <h5>Keywords</h5>
            <div class="form-control" style="padding-bottom:40px;">
                <div class="col-md-10">
                    <label>Declaratively walpurgisnacht station wellesley unsmudged cystomatous transfuse pecos nonconservative cocainise seaway unblasted gainsaid prewhipped. Adenomatous tzarevna fustily opelika counterblow balaamitical frogmouth damaskeening orthopneic carriable palaeontology postmyxedemic grandsire retouchtracing. Floor saturnalia bagwork semiacid drawl unregal cartouch predestinating curses traymobile quixotism antithesis fourpenny reshine. Gleamingly mongoloid ectrodactylous endostosis chromophil presagefully titillate cruise proairplane curaao montanan untappable flavius unintercepting. Gotha sarape halfpaced winnipegosis aphasia parotidean hydrate hatchetlike nonignitable shockingly changeable animi feces coerce</label>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary waves-effect waves-light" style="display: inline-block; width:80px" data-step="1">
                        Edit
                    </button>
                </div>
            </div>
        </div>
   </div>

结果如下图所示。

以下是form-control样式：

如果您看到我的<label>有很多单词而我遇到的问题是圆形背景矩形没有随Word Wrap一起增长。

我用红色标记了我正在谈论的圆形背景矩形。

  

如何让该背景以相同的比例增长？

由于

Answer 1

您没有按预期方式使用引导程序

.form-control有一个固定的高度。您可以将.form-control更改为没有固定高度，也可以添加自定义类来更改元素的高度。我建议在这里查看这个和其他引导类的预期用法： https://v4-alpha.getbootstrap.com/components/forms/

Answer 2

您必须编辑.form-control类，以使其没有固定的height。这是一个demo，我将height:auto添加到.form-control类。