W3.css使用jQuery UI進度條

我在我這一個最後的救命稻草衝突。我無法弄清楚，現在已經三天了。我使用w3.css使用jQuery UI和jQuery UI.css。W3.css使用jQuery UI進度條

問題：出現進度條，但不填。當您刪除href到w3.css，進度條工作得很好。但是否則，填充不會發生。

FIDDLE：http://jsfiddle.net/kjg95pxq/7/

HTML

<body class="w3-content" style="max-width:1300px"> 

    <!-- ROW 3.1: Skillsets Section --> 
    <div class="w3-container"> 

    <div class="progressbar w3-center" id="progressbar" data-value="50"> 
     <p style="position:absolute">20%</p> 
    </div> 
    </div> 

    <div class="w3-row" id="rowWaypoint2"> 
    <div class="capsuleBox3 animated" id="capBox3"> 
     <div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px"> 
     <div style="padding-top:55px"> 
      <h1>Skillsets</h1> 
      <p>My current skill progressions</p> 
     </div> 

     <!-- Progress Bar for JavaScript/jQuery --> 

     <div style="padding-top:18px"> 
      <p> Tacos </p> 
     </div> 

     <div style="padding-top:0px"> 
      <div class="progressbar w3-center" data-value="40"> 
      <p style="position:absolute">20%</p> 

      </div> 
     </div> 

     <div class="progressbar w3-center" id="progressbar" data-value="80"> 
      <p style="position:absolute">20%</p> 
     </div> 

     <div class="progressbar w3-center" data-value="20"> 
      <p style="position:absolute">20%</p> 
     </div> 

     </div> 
    </div> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 

</body>

CSS

.progressbar { 
    width: 80%; 
    margin: 20px auto; 
} 

.ui-progressbar-value { 
    transition: width 0.5s; 
    -webkit-transition: width 2s; 
}

$(document).ready(function() { 
    pbRun(); 
    function pbRun() { 
    $(".progressbar").progressbar(); 
    //this initializes the widget 
    $(".progressbar").each(function() { 
     var valPB = parseInt($(this).data('value')); 
     var percentPB = valPB; 
     $(this).progressbar("option", "value", percentPB); 
    }); 
    } 
});

來源

2017-03-23 helpkelp

嘗試使用：

.ui-progressbar .ui-progressbar-value { 
    box-sizing: content-box; 
}

w3.css補充說：

*, *:before, *:after { 
    box-sizing: inherit; 
}

與代碼弄亂。

JSfiddle

來源

2017-03-23 19:20:46

神聖的狗屎我愛你。那樣做了。非常感謝！我會把這些知識傳達給每個人。 – helpkelp

謝謝！另外，您是否可以刪除對未來觀衆無益的評論？它只是保持網站更乾淨:)再次感謝！ –

W3.css使用jQuery UI進度條

回答

相關問題