Question

我花了很多时间，但无法让它发挥作用。你可以在小提琴上看到，我有三个主要的块（浅灰色），里面有多个块。我需要那些小暗块相对于屏幕宽度或.thisBlock块（相同）的宽度相等。所有的div都在他们的位置。标记相当困难，所以我留下了最重要的块。 https://jsfiddle.net/nv5aznym/4/

.c {
  background-color: green;
  margin: 0 2px;
  color: white;
  width: 100%;
}
.ul {
      padding: 0;
    margin: 0;
    background-color: #dfe0e2;
    padding: 5px;
}
.ul li {
  background-color: #5d5d5d;
    color: #919191;
    cursor: default;
    width: 100%;
    margin: 0 2px;
}

和CSS：

lastIndexOf

Answer 1

使用以下jQuery代码：

var totalLi = $('.thisBlock li').length;

$('.thisBlock .c').each(function(index, element){
    var cLi = $(element).find('li').length;
    $(element).css({'flex-basis':cLi/totalLi *100 +'%'})
})

https://jsfiddle.net/acLx1mod/

Bootstrap 4 beta 2.如何在拉伸到屏幕宽度的不同col内制作相等宽度的li？

1 个答案: