Question

我目前有一个进度条，看起来像是我用bootstrap实现的。

由于某种原因，0/0向左移动，text-align: center;不能使文本转到中间。

有趣的是，0/0也没有显示，但我得到了0，即使我在控制台中看到0/0时也是如此在那里。

有没有人有任何想法如何解决这个问题，以便0/0出现在中心？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row justify-content-center">
  <div class="col-xs-1">☹️</div>
  <div class="col-xs-8">
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" style="width: test_number_percentage" aria- valuenow="test_number_percentage" aria-valuemin="0" aria-valuemax="7">
        0 / 7
      </div>
    </div>
  </div>
  <div class="col-xs-1" style="padding-left: 0;"></div>
</div>

＆＃13;

test_number百分比等于0％，如果为0或100％，如果为7 test_number为0或7，具体取决于条形码。

Answer 1

我希望它能帮到你：

def Combat(player,Enemy):
userInput = input("How would you like to attack the enemy (P)ower attack, (Q)uick Attack,(C)ounter attack, or (N)ormal attack?").upper()
PlayerAttackRoll = [random.randint(1,20)-1]
EnemyAttackRoll = [random.randint(1,20)-1]
PlayerAttackBonus = player['Attack'] / 5
EnemyAttackBonus = Enemy['Attack'] / 5
PlayerDefenseBonus = player['Defense'] /5
EnemyDefenseBonus = Enemy['Defense'] / 5
if userInput == "P":
    PlayerAttackBonus *= 2
    EnemyAttackBonus *= 1.5
elif userInput =="Q":
    PlayerAttackBonus *= 2
    EnemyDefenseBonus *= 1.5
elif userInput =="C":
    PlayerAttackBonus *= 2.5
    PlayerAttackBonus *= 0
elif userInput =="N":
    player['Attack']
while True:# This is where i keep getting the error at
    PlayerDamage = PlayerAttackRoll + PlayerAttackBonus - EnemyDefenseBonus -10
    EnemyDamage = EnemyAttackRoll + EnemyAttackBonus - PlayerDefenseBonus - 10
    if PlayerDamage == "<=0":
           print("You have missed Enemy took no damage.")
    elif EnemyDamage == "<=0":
        print("Enemy has missed you take no damage.")
return player,Enemy

.left {
      padding-right: 0;
      text-align: right;
    }
    .right{
      padding-left: 0;
    }
    .justify-content-center {
      margin-top: 20px;
    }
    .progress{
      margin-bottom: 0;
      color:black;
      text-align: center;
      position: relative;
    }
    .progress_text {
      position: absolute;
      left: 0;
      right: 0;
      color: #fff;
      z-index: 1;  
    }

当你有7/7时它会告诉你：

<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
    <div class="row justify-content-center">
        <div class="col-xs-2 left">
            <img src="https://image.ibb.co/dw0DAG/sad.png" />
        </div>
        <div class="col-xs-8">
            <div class="progress">
                <div class="progress-bar progress-bar-success" role="progressbar" style="width: calc(test_number*100%/7)" aria- valuenow="test_number" aria-valuemin="0" aria-valuemax="7">
                </div>
                <span class="progress_text">test_number / 7</span>
            </div>
        </div>
        <div class="col-xs-2 right">
            <img src="https://image.ibb.co/eonoub/happy.png" />
        </div>
    </div>
</body>

    .left {
      padding-right: 0;
      text-align: right;
    }
    .right{
      padding-left: 0;
    }
    .justify-content-center {
      margin-top: 20px;
    }
    .progress{
      margin-bottom: 0;
      color:black;
      text-align: center;
      position: relative;
    }
    .progress_text {
      position: absolute;
      left: 0;
      right: 0;
      color: #fff;
      z-index: 1;  
    }

Answer 2

您将文本放在进度条div中，但您必须将其放在进度div

上

<div class="row justify-content-center">
   <div class="col-xs-1">☹️</div>
   <div class="col-xs-8">
      <div class="progress">
         <div class="progress-bar progress-bar-success" 
            role="progressbar" style="width: test_number" aria-
            valuenow="test_number" aria-valuemin="0" aria-valuemax="7">
         </div>
            test_number / 7
      </div>
   </div>
   <div class="col-xs-1" style="padding-left: 0;"></div>
</div>

https://jsfiddle.net/99azq2ay/1/

如何在bootstrap中将text-align放在0％的中间位置？

2 个答案: