Question

我试图使col-*-3相等的高度，col's内的内容是动态且不均匀的。

CSS

.quotebox {
    border-radius: 10px;
    border: 1px solid #5B5B5B;
}
.comp-logo {
    width: 90%;
    padding: 0px 30px 10px 30px;
}
.choices h4 {
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
    background-color: #5B5B5B;
    border-radius: 6px 6px 0px 0px;
    padding: 10px 0px 10px 0px;
    color: #fff;
}
.btn-booking {
    width: 100%;
    border-radius: 0px 0px 6px 6px;
}
.order-btn {
    /* position:absolute;  */
}

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row" id="equalHeight">
        <div class="col-sm-3 choices">
            <div class="quotebox">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Heading Title</h4>
                        <img src="https://d13yacurqjgara.cloudfront.net/users/110328/screenshots/1666562/flat_icons_1x.png" alt="logo" class="comp-logo" />
                        <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content unev</p>
                        <div class="more-info text-center"> <a class="btn btn-primary">More Information</a>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                    <h5>Todays Price</h5>
                            </div>
                            <div class="col-sm-6">
                                    <h5>&pound; 100</h5>
                            </div>
                        </div>
                        <div class="order-btn text-center">
                            <form action="#" method="post">
                                <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3 choices">
            <div class="quotebox">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Heading Title</h4>
                        <img src="http://cdn.freebiesbug.com/wp-content/uploads/2013/09/flat-icons.jpg" alt="logo" class="comp-logo" />
                        <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven contentuneven content uneven content unevuneven content uneven content unevuneven content uneven content unev</p>
                        <div class="more-info text-center"> <a class="btn btn-primary">More Information</a>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                    <h5>Todays Price</h5>
                            </div>
                            <div class="col-sm-6">
                                    <h5>&pound; 100</h5>
                            </div>
                        </div>
                        <div class="order-btn text-center">
                            <form action="#" method="post">
                                <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3 choices">
            <div class="quotebox">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Heading Title</h4>
                        <img src="http://thumbs.dreamstime.com/x/business-flat-icons-set-web-mobile-design-application-35047525.jpg" alt="logo" class="comp-logo" />
                        <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven contentuneven content uneven content unev</p>
                        <div class="more-info text-center"> <a class="btn btn-primary">More Information</a>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                    <h5>Todays Price</h5>
                            </div>
                            <div class="col-sm-6">
                                    <h5>&pound; 100</h5>
                            </div>
                        </div>
                        <div class="order-btn text-center">
                            <form action="#" method="post">
                                <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-3 choices">
            <div class="quotebox">
                <div class="row">
                    <div class="col-sm-12">
                        <h4>Heading Title</h4>
                        <img src="http://flatdsgn.com/wp-content/uploads/2013/09/Free-Retina-Flat-Icons2.jpg" alt="logo" class="comp-logo" />
                        <p>uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content uneven content</p>
                        <div class="more-info text-center"> <a class="btn btn-primary">More Information</a>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                    <h5>Todays Price</h5>
                            </div>
                            <div class="col-sm-6">
                                    <h5>&pound; 100</h5>
                            </div>
                        </div>
                        <div class="order-btn text-center">
                            <form action="#" method="post">
                                <input type="submit" value="Book Book Book" class="btn btn-success btn-lg btn-booking" />
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我试过了

display:table，使其无响应
由于缺乏移动浏览器支持，请不要使用display:flex

尝试了以下jQuery脚本

$(document).ready(function () {
  $("#equalHeight").each(function () {
    var highestBox = 0;
    $(".quotebox", this).each(function () {
        if ($(this).height() > highestBox) highestBox = $(this).height();
    });
    $(".quotebox", this).height(highestBox);
  });
});

使用jQuery，col的高度相等，但book按钮不会粘在底部，position:absolute;也不能使用底部按钮，

如何使这些相同的高度与不均匀的内容相同，而book按钮贴在col的底部

Fiddle without jQuery

Fiddle with jQuery

Answer 1

使用Jquery我设置按钮相对于div的高度。但是，您需要一个媒体查询来保持响应能力：

if ($(window).width() >= 768){
        $(".btn-booking", this).each(function () {
            id = $(this).data('id');
            pos = highestBox - $("[data-id='" + id + "']").position().top;
            pos -= 2 * $(this).height();
            $("[data-id='" + id + "']").css("margin-top", pos);            
        });
    }

这是一个小提琴：FIDDLE

Bootstrap 3 col等高，动态和不均匀的内容

1 个答案: