Question

我正在尝试固定底部的进度条，但是它不可见...

.sticky-progress-bar {
  position: fixed;
  bottom: -4px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress sticky-progress-bar">
 
  <div class="progress-bar w-50 progress-bar-striped progress-bar-animated">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

您需要给它一个宽度

.progress {
  width: 100%;
}

Answer 2

正如其他人回答的那样，问题是由于宽度不足所致，但我相信您还需要答案为什么 <div>需要宽度。

由于<div>的默认显示为block，因此默认情况下position:fixed会占据其父级的整个宽度。 width:100%本质上将元素从文档流中剔除，不再考虑父级的宽度，而是依靠其自身的width值。没有设置宽度，默认值为0，这就是为什么看不到进度栏的原因。

Answer 3

您的进度div没有内容，因此您的宽度为0，您可以设置宽度：100％，它将正常工作。

.sticky-progress-bar {
  position: fixed;
  bottom: -4px;
  width: 100%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress sticky-progress-bar">
 
  <div class="progress-bar w-50 progress-bar-striped progress-bar-animated">
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 4

您只需要在 progress 类中添加.progress { width: 100%; }。

public class var {

    public static void main(String[] args) {

        int playerCard1 = 0;
        int suit = 0;
        char suitChar = ' ';
        int num = playerCard1;

        //making playerCard1 generate a random number between 1 and 13
        playerCard1 = (int)(Math.random() * 13 + 1);

        //making suit generate a random number between 1 and 4 for first card
        suit = (int)(Math.random() * 4 + 1);

        System.out.println(num);

        //switch statements for suit of player's first card

        switch (suit){
            case 1: suitChar = 'D'; //diamonds
                break;

            case 2: suitChar = 'S'; //spades
                break;

            case 3: suitChar = 'H'; //hearts
                break;

            case 4: suitChar = 'C'; //clubs
                break;


        }//end of switch statements for suit of player's first card 
        switch (playerCard1){
        case 1: System.out.print("A" + suitChar);
            break;

        case 2: System.out.print("2" + suitChar );
            break;

        case 3: System.out.print("3" + suitChar);
        break;

        case 4: System.out.print("4" + suitChar );
            break;

        case 5: System.out.print("5" + suitChar );
            break;

        case 6: System.out.print("6" + suitChar );
            break;

        case 7: System.out.print("7" + suitChar);
            break;

        case 8: System.out.print("8" + suitChar );
            break;

        case 9: System.out.print("9" + suitChar);
            break;

        case 10: System.out.print("10" + suitChar );
            break;

        case 11: System.out.print("J" + suitChar );
            break;

        case 12: System.out.print("Q" + suitChar);
            break;

        case 13: System.out.print("K" + suitChar);
            break;


            }//end of switch statements for playerCard1


    }//end of main

}//end of class

您的进度将可见！

为什么进度条不可见？

4 个答案: