引导窗体-控件类而不是字包装标签

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>有很多单词，而我遇到的问题是，这个圆形的背景矩形与单词Wrap没有增长。

我用红色标记了我所说的圆形背景矩形。

​

​

我怎样才能使这个背景以同样的比例增长？

谢谢

Answer 1

您没有按其预期方式使用引导类。

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

Answer 2

您必须编辑.form-control类，以便它没有固定的height。下面是一个演示，我将height:auto添加到.form-control类中。