Bootstrap 4 beta2.如何在延伸到屏幕宽度的不同列内制作相等宽度的li? [英] Bootstrap 4 beta 2. How to make equal width li inside different col which are stretched to screen width?

问题描述

我花了很多时间，但无法正常工作. 正如您在小提琴上看到的那样，我有三个主要块(浅灰色)，并且内部有多个块.我需要那些小的深色块的宽度等于屏幕宽度或.thisBlock块的宽度(相同). 所有div都在其位置上.标记相当困难，因此我已经离开了最重要的部分. https://jsfiddle.net/nv5aznym/4/

I've spent much time, but can't get it work. As you can see on fiddle, I have three main blocks (light gray), and multiple number of blocks inside. I need those little dark blocks to be equal width relatively to the width of the screen or to .thisBlock block (the same). All divs are on their places. The markup is rather difficult, so I've leaved the most important blocks. https://jsfiddle.net/nv5aznym/4/

<div class="row">

  <div class="col-12">


    <div class="row no-gutters">

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">1</li>
            <li class="d-inline-block">2</li>
          </ul>
        </div>

      </div>

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
          </ul>
        </div>

      </div>

      <div class="col c">

        <div class="block">
           <ul class="ul d-flex justify-content-between">
            <li class="d-inline-block">11</li>
            <li class="d-inline-block">22</li>
            <li class="d-inline-block">33</li>
            <li class="d-inline-block">44</li>
          </ul>
        </div>

      </div>

    </div>


  </div>

和CSS:

.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;
}

推荐答案

使用以下jQuery代码:

use this jQuery code:

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 beta2.如何在延伸到屏幕宽度的不同列内制作相等宽度的li?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！