Question

我是网络开发的新手，两个月前开始研究Bootstrap-3。 BS提供开箱即用的响应“宽度”列。但是在我的项目中，我有一些元素，其高度也应该是响应性的。假设我有一张宽度为col-xs-6 col-sm-4的素材卡，我已将大屏幕的默认高度设置为210px。现在在小屏幕上自动调整宽度，但高度显然是固定的，这破坏了设计。

我的要求：

根据元素在不同屏幕尺寸下的最大高度和宽度，调整元素的高度及其内部分割。
排版似乎也是静态的，因此请根据屏幕尺寸调整字体大小，行高等。
另外，我正在尝试实现“多行椭圆”，我的意思是根据容器高度修剪文本。我使用white-space在单行椭圆中取得了成功：now-wrap和text-ellipses：ellipses。但现在我想显示几行然后修剪。

第1点的代码。

    <div class="col-xs-6 col-sm-6 col-md-4">
                    <div class="panel panel-default panel-card">
                        <div class="panel-heading">
                            <img class="img-responsive" src="#"/>
                        </div>
                        <div class="panel-figure">
                            <img class="img-responsive img-circle" src="#"/>
                        </div>
                        <div class="panel-body text-center">
                            <p class=""><a href="#">Username</a></p>
                            <a href="#" class="">50 Posts</a>
                        </div>
                        <div class="panel-thumbnails">
                            <div class="thumb">
                                <img src="#"/>
                            </div>
                            <div class="thumb">
                                <img src="#"/>
                            </div>
                            <div class="thumb">
                                <img src="#"/>
                            </div>
                            <div class="thumb">
                                <img src="#"/>
                            </div>
                            <div class="thumb">
                                <img src="#"/>
                            </div>
                        </div>
                    </div>
                </div>

CSS

.panel.panel-card {
    height: 210px;
    overflow: hidden;
    position: relative;
}
.panel.panel-card .panel-heading {
    z-index: 2;
    height: 115px;
    overflow: hidden;
    position: relative;
    background-color: #1abc9c;
    border-bottom-color: #fff;
    -webkit-transition: height 600ms ease-in-out;
    -moz-transition: height 600ms ease-in-out;
    -o-transition: height 600ms ease-in-out;
    transition: height 600ms ease-in-out;
}
.panel.panel-card .panel-heading img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 120%;

    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

.panel.panel-card .panel-figure {
    position: absolute;
    top: auto;
    left: 50%;
    z-index: 3;
    width: 70px;
    height: 70px;
    background-color: #fff;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity: 1;
    -webkit-box-shadow: 0 0 0 3px #fff;
    -moz-box-shadow: 0 0 0 3px #fff;
    box-shadow: 0 0 0 3px #fff;

    -webkit-transform: translate3d(-50%,-50%,0);
    -moz-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);

    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.panel.panel-card .panel-figure img{
    height: 100%;
    max-width: 100%;
}
.panel.panel-card .panel-body {
    padding-top: 40px;
    padding-bottom: 20px;

    -webkit-transition: padding 400ms ease-in-out;
    -moz-transition: padding 400ms ease-in-out;
    -o-transition: padding 400ms ease-in-out;
    transition: padding 400ms ease-in-out;
}

.panel.panel-card .panel-thumbnails {
    display: block;
    padding: 10px 5px 0;
    text-align: center;
    position: relative;
}
.panel-thumbnails .thumb {
    width: 45px;
    height: 45px;
    margin: 0 2px;
    max-width: 100%;
    display: inline-block;
    background-color: #fff;
}
.panel-thumbnails .thumb img{
    display:block;
    width:100%;
    height: 100%;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    object-fit: cover;
}
.panel.panel-card:hover .panel-heading {
    height: 60px;

    -webkit-transition: height 400ms ease-in-out;
    -moz-transition: height 400ms ease-in-out;
    -o-transition: height 400ms ease-in-out;
    transition: height 400ms ease-in-out;
}

.panel.panel-card:hover .panel-figure {
    opacity: 0;
    height: 30px;
    width: 30px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}
.panel.panel-card:hover .panel-body {
    padding-top: 20px;

    -webkit-transition: padding 400ms ease-in-out;
    -moz-transition: padding 400ms ease-in-out;
    -o-transition: padding 400ms ease-in-out;
    transition: padding 400ms ease-in-out;
}

您可以找到原始代码段here

如果我能得到某种混合物或其他东西来实现这一点，那将是很棒的。我过去3周一直试图解决这个问题，但没有成功，请帮助我提出建议。

谢谢。

Bootstrap 3中的响应元素高度和排版

0 个答案: