Bootstrap列下一行不起作用

时间:2017-09-25 14:45:52

标签: twitter-bootstrap-3

关于移动测试出了问题我尝试使用移动/响应式网页设计测试仪,因为CoffeeCoffeeCoffeeCoffee文本我的专栏不在我的专栏下。这是图片:

enter image description here

这是html代码:

 <div class="row ">
            <div class="form-group">
                <div class="searchable-container"> 
                        <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center">
                            <div class="info-block block-info clearfix">
                                <div class="square-box pull-left">
                                    <span class="fa fa-tags"></span>
                                </div>
                                <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                    <label class="btn btn-default">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                            <span class="fa fa-check "></span>
                                            <h5>CoffeeCoffeeCoffeeCoffee</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center">
                            <div class="info-block block-info clearfix">
                                <div class="square-box pull-left">
                                    <span class="fa fa-tags"></span>
                                </div>
                                <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                    <label class="btn btn-default">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                            <span class="fa fa-check "></span>
                                            <h5>Tea</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center ">
                            <div class="info-block block-info clearfix">
                                <div class="square-box pull-left">
                                    <span class="fa fa-tags"></span>
                                </div>
                                <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                    <label class="btn btn-default">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                            <span class="fa fa-check "></span>
                                            <h5>Fruit Juice</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="items col-xs-6 col-sm-6 col-md-3 col-lg-3 text-center">
                            <div class="info-block block-info clearfix">
                                <div class="square-box pull-left">
                                    <span class="fa fa-tags"></span>
                                </div>
                                <div data-toggle="buttons" class="btn-group bizmoduleselect">
                                    <label class="btn btn-default">
                                        <div class="bizcontent">
                                            <input type="checkbox" name="var_id[]" autocomplete="off" value="">
                                            <span class="fa fa-check "></span>
                                            <h5>Fruit Juice</h5>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </div>

我的按钮有这个css。我使用bootstrap-v3.3.7.css和Bootstrap v3.3.7 js

label.btn-default {
        white-space: normal;
        word-break: break-all;
    }

感谢您的帮助。 !

2 个答案:

答案 0 :(得分:0)

您可以拥有“行”中的所有内容,也可以使用明确修复(https://v4-alpha.getbootstrap.com/utilities/clearfix/

答案 1 :(得分:0)

解决方案:

  $(document).ready(function () {
    var h = $('.items').height();
    $(".items").css("height", h+10);
});

height(); 给我最高的柱高,然后我给它们所有这个高度。