Question

我正在使用Bootstrap设计一个表单，但我的标签大小可变，导致我的表单变形，如屏幕截图所示。

我使用过clearfix课程＆amp; vertical-align风格。

我不希望我的标签有固定的高度，因为它们可以有不同的大小。（例如，2,3,4或甚至更多行）。

这是我的代码。

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 1 </label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 2 In fact the bigger label than all </label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 3 </label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 4 </label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 5 </label>
            <input class="form-control" type="text">
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
        <div class="form-group">
            <label> Label 6 </label>
            <input class="form-control" type="text">
        </div>
    </div>  
</div>

Answer 1

这是我在被迫使用bootstrap时的方法

在您的输入行中＆＃39;你有一个输入标签＆＃39;和＆＃39;输入元素＆＃39;这是col-6。这可确保它们占用可用空间的50％。 col-xs-12确保它们以较小的浏览器宽度（移动）堆叠。

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="col-md-6 col-sm-6 col-xs-12 input-label">
                 <label for="xxx">Input label</label>
            </div>
            <div class="col-md-6 col-sm-6 col-xs-12 input-element">
                <input type="text" name="xxx" id="xxx" class="col-md-12 col-sm-12 col-xs-12" />
            </div>
         </div>
      </div>

Bootstrap中的可变大小标签问题

1 个答案: