如何使垂直滑块中的内容宽度达到100%?

时间:2014-08-25 18:43:11

标签: jquery html css twitter-bootstrap-3 horizontal-accordion

我已经坚持了好几个小时(已经差不多5个了),我发现了一个非常好的水平滑块教程,我试图在我的网站上实现,它似乎在各方面都很好,除了我不能获取内容在滑块中的全宽。它只占宽度的70%左右。我指定了宽度:100%;对于内容,它没有做任何事情。

.panel-group .panel div.survey {
    margin-left: 400px;
    margin-top: 400px;
    position: relative;
    width: 100%;
    right: 0px!important;
    border: 1px solid red;
}

这就是我所拥有的几乎完美,基本上我的目标是让内容为红色的内容占据幻灯片的整个宽度

jsfiddle 我错过了一些非常简单的东西吗?任何帮助表示赞赏

1 个答案:

答案 0 :(得分:2)

您所指的“宽度”实际上是面板的高度。

面板已旋转90度。您需要调整面板的高度以占据屏幕的整个宽度。

首先获取屏幕宽度,然后调整面板高度,最后调整测量高度。在玩各种窗口尺寸后,我发现以下工作:

var width = $(window).width();
$(".panel-body").height(width);
$(".survey").css("width", width - 60);
$(".survey").css("margin-top", width - 70);

还包括resize功能,以便在用户更改屏幕分辨率时,面板将进行调整:

$(window).resize(function(){
    var width = $(window).width();
    $(".panel-body").height(width);
    $(".survey").css("width", width - 60);
    $(".survey").css("margin-top", width - 70);
});

JS Fiddle Demo