[英]Stretch list items to 100% width of container
I'm using bootstrap 3 and trying to imitate metro ui's stepper plugin. 我正在使用bootstrap 3,并试图模仿Metro ui的stepper插件。 I am trying to put left values using jQuery, so that my list items are evenly spaced and take up 100% of the container, but console shows all values are 0. My code: 我试图使用jQuery放置左值,以便我的列表项均匀分布并占据100%的容器,但控制台显示所有值均为0。我的代码:
$(document).ready(function () {
steps = $(".stepped li"),
element_width = $(".stepped li").width(),
steps_length = steps.length - 1,
step_width = $(steps[0]).width();
$.each(steps, function (i, step) {
var left = i == 0 ? 0 : (element_width - step_width) / steps_length * i;
console.log(steps);
$(step).animate({
left: left
});
});
});
I can't find what I am doing wrong, all left values are returning 0px. 我找不到我在做什么错,所有剩余的值都返回0px。 Here's the link to the plugin that I'm trying to imitate: http://tinyurl.com/o6sld95 . 这是我要模仿的插件的链接: http : //tinyurl.com/o6sld95 。 The list is a simple unordered list. 该列表是一个简单的无序列表。
<ul class="stepped">
<li class="complete">1</li>
<li class="complete">2</li>
<li class="current">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Change element_width = $(".stepped li").width()
to element_width = $(".stepped").width()
. 将element_width = $(".stepped li").width()
更改为element_width = $(".stepped").width()
。
You currently are getting the width of the li
item twice and assigning it to both element_width
and step_width
, so when you subtract them you get 0
. 当前,您将获得li
项目的宽度两次,并将其分配给element_width
和step_width
,因此当您减去它们时,您将获得0
。
Here is a plain css solution, if that is interesting for you: http://jsfiddle.net/u3w0qfaz/1/ 如果您对此感兴趣,这是一个简单的CSS解决方案: http : //jsfiddle.net/u3w0qfaz/1/
The first version is using transition of the width of the parent container to simulate the desired effect: 第一个版本使用父容器的宽度过渡来模拟所需的效果:
ul.stepped {
display: flex;
list-style: none;
flex-wrap: nowrap;
flex-direction: row;
transition-duration: 1s;
width: 1px;
}
ul.stepped li {
flex: 1 1 auto;
}
ul.stepped.go {
width: 100%;
}
Here is another version which is using transform to have a scaling effect on the items: http://jsfiddle.net/u3w0qfaz/ 这是另一个使用transform来缩放项目的版本: http : //jsfiddle.net/u3w0qfaz/
ul.stepped
{
/*...*/
transform: scaleX(0);
transform-origin: left;
}
ul.stepped.go
{
transform: scaleX(1);
}
If you're using Bootstrap three you could use the Justified Button Nav . 如果您使用的是Bootstrap 3,则可以使用Justified Button Nav 。
Bootstrap 3 + 1 CSS: Bootstrap 3 + 1 CSS:
ul{
-webkit-padding-start: 0px;
}
<ul class="stepped btn-group btn-group-justified">
<li class="complete btn-group">1</li>
<li class="complete btn-group">2</li>
<li class="current btn-group">3</li>
<li class="btn-group">4</li>
<li class="btn-group">5</li>
<li class="btn-group">6</li>
</ul>
JsFiddle Example . JsFiddle示例 。
There is no need for jQuery at all unless you need to support browsers that are only CSS 2.x. 除非您需要支持仅CSS 2.x的浏览器,否则根本不需要jQuery。
Or pure CSS + HTML (pretty much how Bootstrap 3 does it) 或纯CSS + HTML(几乎是Bootstrap 3的工作方式)
.stepped{
padding: 0;
display: block;
width: 100%;
}
.stepped > li {
display: table-cell;
border: 1px solid black;
width: 1%;
}
<ul class="stepped">
<li class="complete">1</li>
<li class="complete">2</li>
<li class="current">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.